CustomLayout scrollbar is missing

Hi,

I have design a form with a CustomLayout because I want a side by side textfield. Then this form has many texfield that when display in browser it’s off the screen. Unfortunately the scroll bar is missing so I cannot see the bottom textfield.

Here is example code:


public class FormView extends VerticalLayout {
    private TextField nameTextField = new TextField();
    ...
    ...
    ...

    public FormView() {
        CustomLayout customLayout = new CustomLayout("form");
        customLayout.addComponent(nameTextField);
        ...
        ...
        ...

        addComponent(custom);
    }
}

How to get the scroll bar so I can see all the textfield?

I found the solution
here
with using Panel but the panel cannot align center. Any idea?

Vaadin layouts don’t scroll because they have the css rule “overflow:hidden”, you can try setting “overflow:auto” or “overflow:scroll” to your custom layout.
You will need to use firebug or other equivalent to find out the exact CSS selector as vaadin layouts have fairly complex DOM structures…

I have try to override customlayout setting:

in styles.css


.v-customlayout {
    overflow: auto;
}

still not working.

Your selector is not strong enough, vaadin default will override it.
try “div.v-customlayout” or “.v-app .v-customlayout”

Great. Now I have a scrollbar without use a Panel.

This is it in my styles.css:

.v-app .v-customlayout {
    overflow: auto;
}

Thanks.

/Shamsul