Layout sizing in a vaadin application

Vaadin 6 / 7 / 8 Framework UI
1

i am attempting to get some insight on how sizing should work in a vaadin application. I built a vaadin app using px to define all of my layouts, buttons and other components. This was a poor choice since now any screen size larger or smaller than the one i developed with creates a disformatted look. My question to any CSS Vaadin experts or layout editors is how do i properly define the width and height of components so that the view automatically adjusts depending on screen size?

2

My personal approach is the following :

  • if something has a fixed size (logo, …) use pixels
  • if something has a fixed size on one axis, use pixels on that axis, percentage on the other (for example a toolbar which has a limited height but use all screen width)
  • make everything else percentage based so that it flows well with screen size changes

In some cases fixed layouts are the best. For instance this forum is 966px wide, smaller screens have scrollbars, bigger screens have white space on left and right.
It all depends on what you want to do.