I am trying to figure out how to mimic the browser zoom. The problem is that if I use the CSS tricks, it looks much worse then browser zoom, which looks near perfect. Any ideas for a Vaadin 7 application?
I apply this class at the outermost horizontal layout, which contains the menu on the side, the title bar at the top, and the content section right below the title bar.
The easiest way to see it is the scrollbar at the bottom of each picture. For the browser zoom, the scrollbar is only for the content section, but for the CSS zoom, it is for the entire window. There are other little differences as well, but I chose the easiest one to see quickly. Any help would be appreciated. Even a different way to ask this question.
This question is scattered all over StackOverflow, and none of those places truly solve this problem.
Browser zoom and transform:scale do completely different things – the former multiples all sizes before rendering (somewhat similar to DPI settings in the OS), while the latter simply scales an already rendered element (without re-layouting or anything like that).
In V10+ this would be super easy by just increasing the root font size, but in V7 Vaadin components use pixel values, so that won’t work.
I did a month or so ago, but I remember it looking even worse then scale. Also, I kept reading that scale was the preferred method, over zoom. Not that that is still true, just read it quite often.
I even considered making a different theme, and changing $v-font-size variable from what it is to a larger or smaller value. Seems like overkill to me, but it is something I considered. But as you pointed out, it is in pixels, which means if I do increase this variable’s value, it will mess with any other places where I size things based on pixels, like Grid columns (setWidth is in pixels, so when I changed v-font-size, it messed up some columns). I do try to avoid that, but sometimes it is the only way. If it weren’t for the fact that the current customers are used to the current size and the fact that I will need to test and tweak quite a bit if I do change v-font-size for everyone instead of giving them a choice, I would not even be considering zoom or scale.
Thanks for explaining it so well. I will keep digging.
Ok, in Chrome, I add zoom: 150% to see how things looked. I am still researching the best way to use this attribute, but out of the box it doesn’t work so well. This is not as good as doing it directly in the theme, but is a quick and dirty way to see how things might look.
First of all, no zoom, it is commented out. First I will give a screenshot of the HTML, then the screen itself.
So in some ways it works better then scale, in some ways it is worse. I freely acknowledge that I am probably not using it in an ideal way. For instance, I have to imagine setting width and height to 100% on the same element where I am using zoom night cause a little confusion. I am currently researching the best way to use zoom.
Based on Rolf’s comments, it triggered a rather obvious idea (in retrospect). I made the following changes to my theme (I am not including all the changes, just the interesting ones to prove my point):
Popup windows - I have not figured out how to pass my “zoom150” class to them in a generic sense. Don’t get me wrong, I know how to do it on a window by window basis, but because Vaadin 7 has the “root” element below body, the window is a different DIV element, so it never sees my zoom150 class. Trying to think of a way to do this. I do know that when I add “zoom150” class to body tag in Chrome, it doesn’t work. Any ideas to save me work would be much appreciated.
The rare grid column where I set the width explicitly. This one forces me to use pixels, because column.[setWidth](https://vaadin.com/download/release/7.7/7.7.17/docs/api/com/vaadin/ui/Grid.Column.html#setWidth-double-) only takes pixels for Vaadin 7. My idea with this one is to instead use style classes, as per Grid.[setCellStyleGenerator](https://vaadin.com/download/release/7.7/7.7.17/docs/api/com/vaadin/ui/Grid.html#setCellStyleGenerator-com.vaadin.ui.Grid.CellStyleGenerator-), and then in those special classes set the size in EM. If anyone has a better idea, tell me.
Thanks, Rolf, that really made me attack the problem from a different perspective, considering Vaadin 7 and what tricks we need to do with this older version of Vaadin.
From what you said, I guess Vaadin 10+ uses “em” more often, or something else, making the adjustment of the root font-size work a little better. Is that a correct interpretation of your words?
Basically yes. I have an example in one of my apps of setting the theme parameters in such manner (opposite direction though). I am not just adjusting the font base size but a bit more here. There is no one obvious right and wrong setting. As it is about aesthetics it is pretty much trial and error. The approach you are doing is in principle similar, but in Vaadin 7 you need to set those SASS variables for the theme. In the newer Vaadin versions the Lumore theme is better parametrized than Valo was though.
Are you attempting improve the application accessibility by introducing within application zoom mode or why you are doing this? If yes, it would be perhaps good to include higher color contrast at the same time if needed. Based on your screenshot the contrast you have does not look bad though.
Yep, mostly accessibility. I can read it just fine, but some users need the text bigger. My manager really doesn’t want users to have to use the browser zoom feature, so we thought of this.
Total side note on the topic of column widths, but in case someone else finds this and is asking the same question: according to Vaadin 24 docs, here, it says to prefer the rem unit. In my case, I think em will work fine, but we shall see. Still not 100% sure how I will solve those column width issues, but so far I still think the best idea is via the CellStyleGenerator.
Move my CSS styles such that they can be used at <body> level
Change my code to call BodyStyles.addBodyClassName (to enable whatever zoom level I wanted), or BodyStyles.removeBodyClassName (to remove whatever zoom level I wanted)
Here is the updated theme stuff (once again, just giving the part that changed :
$grid-header-footer-font-size: 12px;
$grid-cell-font-size: $v-font-size;
// Other stuff here
.zoom150 .mobiwms.v-app, .zoom150 .mobiwms.v-app-loading {
// transform: scale(1.50);
// transform-origin: top left;
font-size: round($v-font-size * 1.5);
// zoom: 150%;
.v-grid-footer td, .v-grid-header td, .v-grid-header th {
font-size: round($grid-header-footer-font-size * 1.5);
}
.v-grid-cell.title {
font-size: round($v-font-size * 1.2 * 1.5);
}
.valo-menu .valo-menu-badge,
.dashboard-view .notifications.unread .v-button-caption {
font-size: round($v-font-size * 0.9 * 1.5);
}
.v-grid-cell {
font-size: round($grid-cell-font-size * 1.5);
}
.v-caption {
font-size: round($v-caption-font-size * 1.5);
}
.valo-menu {
font-size: round($v-font-size * 1.5);
}
}
// Other stuff here
@mixin mobiwms-common {
// Normal theme stuff, where I used to have the above rules
}
If anyone has an idea for a handy way to make grid column widths easier to handle, do pass it on. I suspect my only option is more CSS tricks and CellStyleGenerator, but maybe there is an easier way. I already looked at the add-ons, but so far I did not see anything.
There is no straightforward answer for that. In some scenarios, e.g. when automatic column width calculation is enabled Grid will programmatically set the widths so you really cannot override them in all scenarios with CSS.
