Grid inside panel layout issue

Hi,

I have a page which shows image thumbnails in a grid. The grid is added to a panel, which is turn is added to a HorizontalLayout. All of the 3 components i.e. Grid, Panel and HorizontalLayout have both the height as well as width set to 100%.

However, running analyze layout reveals the following output:-

Vaadin DEBUG

  • HorizontalLayout/c45aa2c (height: RELATIVE, 100.0 %)
    • Panel/4ba76eff (height: RELATIVE, 100.0 %)
      • VerticalLayout/5d684e26 (height: UNDEFINED)
        • GridLayout/5570984c (height: RELATIVE, 100.0 %)
          Layout problem detected: Component with relative height inside a VerticalLayout with no height defined.
          Relative sizes were replaced by undefined sizes, components may not render as expected.

Where is the VerticalLayout (with the undefined height, and thus causing the issue) in the analyze layout output coming from?

Please advise. Thanks!

Hi,

You have to keep in mind that the Panel component is ComponentContainer for just one component (the ComponentContainer in turn). By default - the content of the Panel is a VerticalLayout (of course without any specified sizes). So the best bet in your case is to call the Panel#setContent(yourGrid) to get rid of that VerticalLayout. Or if your view gets more complex (or in some other cases) and you want to keep the default VLayout - the you can access it with Panel#getContent() method and modify its size accordingly.

cheers,
sasha.

Hi Sasha,

That did work, and the problems reported by Analyze Layout have gone away.

Now, however, the vertical scroll bar on the panel has disappeared. As a result, page content gets chopped off and there is no way to get to it without the vertical scroll bar. Is there a way to get the scroll bar back?

Thanks in advance!

Hi,

Unfortunately those are mutual exclusive requirements. You cannot have panel contents of specified height (either relative or fixed) and demand a scrollbar to be present. The best pattern for the layouts that require all their contents to be rendered in a scrollview - is to specify the Panel height (both fixed and relative will do) and leave the contents with height undefined (values like null and -1 will do that). Now when you add components to the content - it will grow to the size so all the children fit and the scrollbar will apear if needed.

cheers,
sasha

Hi Sasha,

Thanks for that tip; I was able to kill both birds now! :smiley:

1 - Using setContent() on the panel instead of addComponent() got rid of the Analyze Layout issue.
2 - Add removing the height of the Grid which fits into the panel brought the vertical scroll bar back in case the grid has content which needs the scroll bar.

Thanks much!