This question is regarding zoom levels in the browser. The default is 100% zoom in the browser, but we find that our app looks and works better on an 80% zoom level. Is there a way where I can define 80% zoom as the default or that 80% zoom as the new 100%? Let me know if this question does not make sense and I’ll try to explain better.
In general, the UI designer should be used and tested without “Autofit” to see the actual size of your app. Using Autofit (the default in the UI Editor) is great in order to have space for your whole UI inside that editor, but it might trick you a bit (at least if you do not test your app with 100% zoom level, or if you only test it on large high-res screens.
A “hack” exists, however, that scales your whole app, but that code can be placed in the “on app load” - but with no guarantees that it will work forever, and it should only be used for existing apps that have been designed “to large”.
Run code with the following code:
document.body.style.zoom = "80%";
resolve()
Hi. Would it be possible to scale only a window? Our app has an iframe with whereby and i would ideally want to scale this down to e.g. 80% if the browser has a low resolution. (I just want to “zoom out”, not resize it)
If yes, could you provide some guidance on how to achieve this? (I tried modifying the css in the iframe
On a related note, create gives me an error on the following code;
const { data: { src} } = appfarm;
const hostURL = src.get();
document.getElementById("wherebyFrame").src = hostURL;
property ‘src’ does not exist on type HTMLelement.
It currently works fine, and this error did not appear in earlier versions of create, but is it something that will stop working in browser eventually?
I tried a suggestion on casting it to “htmlinputelement” but this does not remove the error.
Warning - using document.body.style.zoom has a nasty side effect on the slider component which makes the slider useless!
1 Like
Hi,
I tried using this “hack,” but now the popovers in my app do not appear in the correct position (they are shifted to the left of where they should be). Is there a workaround for this?
Hi,
Sorry, in general the “hack” is not recommended, as it is not bulletproof for all cases, as we may see here with popovers and sliders.
We do recommend, however, to either disable the Autofit property in Appfarm Create while developing (to make the UI designer respond 1-to-1 with the output), or to test on a screen with “correct” resolution. You may also benefit from enabling Responsive Strategy and adjust the layout for smaller screens.
1 Like