Modify component size

Hello everyone,

I need to create a web application that will be used on small tablets. The vaadin Components are too small to be used on such screens. What are the best practices to overcome this issue?

Particularly, I need to use grids to display information. However, I can’t find a way to increase the font size and make the cell follow up in size. I try using ValoTheme or my own css sheet.

(I am using Vaadin 8 and I can’t change the version easily.)

There are many ways you can use, and usually these are used as combined to tackle different things in order to achieve responsive design.

  1. Use Page().getWebBrowser() … to get information about used web browser and screen size. Set component widths and heights if needed. You can also use the information change your view to use e.g. vertical vs. horizontal layout

  2. Use browser window resize listener to follow the changes of the window and adapt

  3. Use media queries in CSS to get responsive theming, e.g. font-sizes, different FlexBox rules for CSSLayout

  4. Use CSSLayout as responsive wrapper and use CSS FlexBox rules for responsive layouting of the components in CSSLayout

  5. In Grid show less columns if screen or browser window is narrow

These are top-level items. The comprehensive detailed answer would be a booklet. We have some blog posts, and documentation here and there about these topics. Also these topics has been discussed here at Forum and StackOverflow in the past.