How to add scrollbar to Vaadin layout

Question

I have found many questions where people are asking how to hide scrollbars in Vaadin layouts, but my problem is that Vaadin don't show me any scrollbars. For example I can have this code:

HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined(); // I also tried setSizeFull()
for(Integer i = 1; i <= 15; i++) {
    layout.addComponent(new Button("Test button #" + i.toString());
}

But when I run this code, buttons on the page are simply cut off when the browser window is too small to show them all. No scrollbars will appear ever.

I have also tried to create Panel, and then add my layout to this panel. I have tested both - panel.addComponent(foo) and also panel.setContent(foo), and I tried to set panel.setScrollable(true) too. Without any success.

Is there any way to add scrollbar to some kind of Vaadin layout? I use Vaadin 6.8.7. Thanks in advance!

---

There is my full code:

private ComponentContainer openZoomifyLayout() {
    Panel panel = new Panel();
    Panel panel2 = new Panel();

    middlePanel = new MiddlePanel();

    VerticalLayout mw = new VerticalLayout();
    mw.setSizeFull();

    HorizontalLayout sp = new HorizontalLayout();
    Panel photos = new Panel();
    photos.setSizeUndefined();

    mw.addComponent(panel);
    mw.addComponent(panel2);
    mw.addComponent(sp);

    mw.setExpandRatio(sp, 99);
    mw.setExpandRatio(panel, 0);
    mw.setExpandRatio(panel2, 0);

    panel2.addComponent(middlePanel);

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER);
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER);

    photos.setContent(table);
    photos.setScrollable(true);
    sp.addComponent(photos);
    sp.addComponent(createMainDetail());

    return mw;
}

This method is used in class which extends Window, and so in time of initialization is there: setContent(openZoomifyLayout());

Nanete

Can you show your main layout? Probably there is a component with a fixed height somewhere up the layout chain – Flavouring

I have added the code of main layout.. :-) – Nanete

Answer 1

Your sp HorizontalLayout and your photos Panel need to be full sized.

As you can read in the Vaadin Book chapter 6.6.1

Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. Scroll bars in a Panel are handled natively by the browser with the overflow: auto property in CSS.

Hurdle

That is absolutely perfect! You saved me! It works well. Thank you. – Nanete

Answer 2

You will need a panel. You also need to ensure that the panel's size is fixed and not "natural". If its size is "natural", the panel will be enlarged until its content can be displayed fully. The default size for panels is natural, and that is the reason why you don't see any scrollbars.

Dahomey

Answer 3

Follow these steps:

• the outer layout needs fixed or percentual size in the relevant direction (e.g. VerticalLayout needs fixed or percentual height)
• the inner layout needs undefined size in that direction
• the outer layout needs stylename v-scrollable

e.g.

public class SomeView extends CustomComponent implements View
{
        this.addStyleName("v-scrollable");
        this.setHeight("100%");
        VerticalLayout content = new VerticalLayout();
        // content has undefined height by default - just don't set one
        setCompositionRoot(content);
...
}

This will make the CustomComponent show a scroll bar while content grows as needed.

Marchesa