Panel, ScrollBars and MIDDLE_CENTER alignment ...


I’m new with Vaadin and so I have a basic problem.

I want have a View with a header area at the top, a tree area at the left and a work area at the rest (see at Screenshoot1.jpg). But if the work area content is too big (or the browser window too small) the work area should be become scrollbars like in Screenshoot2.jpg.

For scrollbars I need a Panel object with full size which contains a Layout container with a undefined size:

    Panel scrollPanel = new Panel();  // scrollbar panel for the tree and the work area
    HorizontalLayout workPanel = new HorizontalLayout();  // needed for horizontal scrollbar

    // add here the dummy content to the workPanel
    // ...
    // ...
    // ...
    return scrollPanel;

But the problem is that if the browser window is big enough, I cannot align the work area content in the MIDDLE_CENTER, because the scrollPanel has a full size and I cannot set the alignment for the Panel content.

What must I do to get that functionality? I have already tried out different things (set via CSS “overview: auto;” to a VerticalLayout/HorizontzalLayout or align the content of the Panel via CSS with “margin: auto;” but all without success)

I have attach a small test application (the application of the screen shoots) as

Thanks and regards,
12022.jpg (3.08 KB)


What you’re basically after, is min-width: 100% and min-height: 100%, plus the centered alignment for the contained component. Unfortunately the core components/layouts do not provide a way to set min/max-width/height, so this sort of layout is a bit unsupported.

You can use plain CSS to apply min-width and min-height, but the results might be a bit unexpected, and might not work with the client-side layout calculations.

DashLayout add-on
provides a way to set a min/max-widht/height for the layout, but only as pixel values, so that’s still not quite what you need. If I had the time, I would tweak it to support relative min/max sizes as well.


thanks for your answer.

I’m going on since yesterday and I have now the following solution:

I can see both (horizintal and vertical) scrollbars if the work content is bigger as the browser window and if the content is too smal the work content will be aligned in the center, but only horizontal. Vertically stands the work component on top. (see also at the attached screenshoot)

The code for this is very simple (I don’t know why I had it not found yesterday …):


.v-panel-content-test > div {
  text-align: center;
  margin: auto;



I have also attached the CSS and java source to this post.

The only one I’m missing is the vertical alignment of the work area. Is there a way to do that in CSS?

min-height: “100%”
to the workPanel (the HorizontalLayout inside of the Panel) doesn’t help me. The work area is still staying on top.

12025.jpg (3.3 KB)
12027.css (155 Bytes)