Change Fontsize of the page programmatically

Vaadin 6 / 7 / 8
1

Hello everyone

in my root UI i’m opening a settings Window, it contains option to change fontsize. I want that when i sabmit the window (with a click button) all the component in the root UI get their fontsize changed,

Can anyone help ??

2

You didn’t provide much detail what kind of theme you are using and how flexible the size change needs to be. Maybe easiest would be basing your theme on Valo and using $v-font-size . That would require you having a different theme for each of your font settings.

3

Thank you Johannes for your response

i’m using a theme based on valo theme, i need only 3 fontsize choice (small, medium,large).
i had the same idea about using a different theme for each font settings but i think it’s not the more optimized solution

any other idea i can use ?

4

Well I agree managing the three different theme folders might be some work although you could make a script to help you propagate the changes in one of them to all of the folders. Still I would argue, that making a single theme to have three set of style definitions for all of the different combinations of text data is more work. You can judge it by yourself by checking how Valo uses the $v-font-size i.e. how many different selectors you need to implement. Other option would be to implement three styles for all of the components you are using “small”, “medium” and “large”.

5

i tryed the last option using styles.
im my styles.scss i add three css styles like this :

[code]
.themeName-small{
$v-font-size: 16px;
@include themeName;
}

.themeName-medium{
$v-font-size: 20px;
@include themeName;
}

.themeName-large{
$v-font-size: 24px;
@include themeName;
}
[/code]and when i submit the form i just add the according css style :

UI.getCurrent.addStyleName("themeName-small") and of course remove the current css style :

UI.getCurrent().removeStyleName("themeName-medium");
6

Did your solution work for you? I’m not sure if I understand SASS compiling correctly, but doesn’t your CSS now effectively contain everything three times. That would make it almost the same as creating three different themes. Of course your solution is easier to manage as everything is bundled into one theme, but the donwside would is your initial GET request for the CSS is 3x larger.

7

Yes the solution worked for me and like you said my css contain every thing three times
the problem on my case is that i have other data in the theme resources i will need to deplicate if i create other theme
so i take the choice to deplicate the css and not the data
if you have a better solution please let me know
thanks

8

Hi, did you find a better solution to this issue?