I have a single page application developed in Vue.js using the bootstrap-vue library. Because my application is an editor which I want to display properly regardless of screen resolution, I allow users to choose a custom zoom level which I set via:
document.getElementById('html').style.zoom = '90%';
The zoom level is stored in a cookie and applied automatically the next time the user access the same page. This works quite nicely, the only problem is a Sidebar which I am using to display some help info does not scale with the zoom level. The sidebar height seems to have a fixed height equal to screen height at normal zoom level. If I use a zoom level of say 90% as the above, the Sidebar appears shorter than the viewport height. Is there a way to enforce the height of the Sidebar?
I was able to fix the problem by setting the zoom level on Sidebar itself. For example, I set the sidebar zoom level to 100/0.9 when application zoom level is 90%.