I have one user, in particular, with the following setup:
-monitor approx. 30 inch
-resolution: 2560 x 1440
-OS Zoom 125%
-Browser (Edge) font size: very large
-Page zoom: 100%
So far I have managed to get the fonts small enough so they are not clumped or overlapping, but some of the components appear too large, for example some check boxes.
I've tried using the browser inspect tool, but when I change the height and width the check box moves instead of resizing.
Here is a picture show the boxes.
I'm wondering if I can dynamically scale the components based on the page.primaryVew.width property, using something similar to the font sizing.
If the default height is 26px and looks good on a standard monitor with standard resolution... what is standard? Well for us, 1920 x 1080, 27 or 28 inch monitor.
If I use clamp(14px, 26px, 26px) on the height prop, I get a regex expression error:
I also noticed that if I bind a container's width to a calculated value based on the page.primaryVew.width, it does not appear to change on the screen. For example: design width of the embedded container is 750px. If the primaryView.width drops to say 1280 from 1655 (in my case), I take a percentage of that, say 45% which is about 576px. Well, I don't see any changes in the browser. Even if I drop the size down to 120px from 750px.
So, the view tree looks like this:
-Flex - Flex - Emb. View (coordinate containter)
Where does the answer lie? In a custom CSS style sheet?