Change layout "compactness" (margins, spacing) dynamically in CSS


I’m trying to achieve similar functionality to Gmail’s “compactness” setting. This means that the user should be able to select between ‘Comfortable’ and ‘Compact’ layout. As I have learned the “compactness” of a layout in Vaadin is specified by its margin and spacing which can be both modified in CSS. I have successfully overridden the margin settings in CSS in my custom theme and it works!

To be able to switch the margin and spacing settings from theme’s default (which I refer to as ‘Comfortable’) to custom (‘Compact’) I have created a separate CSS file where I override all the margin and spacing rules for the layouts. When the user switches between these two options I either add or remove this custom CSS from the browser window using the CSSInject add-on. However, the changes take place only after manual browser refresh which is unusable for me (and the user).

I have found out that the injecting of the CSS works correctly because other rules work there (e.g. setting the background of the application) and the changes take place immediately. However, the changes in the margins don’t take place until I refresh the browser. I assume this is due to some layout calculations which take these rules into account and these calculations happen on the server-side and are triggerred on browser request. Am I correct?

So the question is: How am I supposed to achieve what I want? Can I achieve this with the current functionality?

Thanks for your responses in advance!


How about adding style names to your layouts when the user changes this setting? That way you have all your css already loaded in the browser (just add all your custom margin styles at the end of the file), and it will render the changes immediately.

I was hoping it could be solved only by changing the CSS but this, of course, would solve my problem as well. However, I’m still interested in other solutions, if there are any.