Calls to setSizeFull() clutter my code

Flow
1

Is there a good way to call setSizeFull() for all components and sub-components of the view? Or what is the proper way

Whenever I create a view I need to endlessly put calls to setSizeFull() on all (or most) of the components. For instance if I have a view with VerticalLayout and a Grid or Tabs in it:

  1. I need to call setSizeFull() on grid
  2. on the VerticalLayout
  3. on the View itself
    Othervais I am getting unpredictable width or height.
2

Don’t think I’ve ever heard that being a problem before, but it’s pretty easy to subclass HorizontalLayout and VerticalLayout and setSizeFull on everything that’s added to them.

Or you could do it with css:

vaadin-vertical-layout > *, vaadin-horizontal-layout > *{
  width: 100%;
  height: 100%;
}

Or if you want to limit it to certain views, you could scope it to ones with a classname e.g.

.full-size-everything {
  & vaadin-vertical-layout > *, & vaadin-horizontal-layout > *{
    width: 100%;
    height: 100%;
  }
}

and then apply that classname to the views where you want that to happen.

Or if you just want specific components to always be full size

vaadin-horizontal-layout, vaadin-vertical-layout, vaadin-grid {
  width: 100%;
  height: 100%;
}
1 Like