Vaadin problems with UI size and scrollbar

Question

I'm realitively new to vaadin and I'm struggling with this problems for 2 days now and I'm desperate. I modified the original addressbook example and it was perfect until that point when I had to expand the ContactForm with another controlls. It's easier to show what i want to achieve. It would be good if I could scroll on the right, but I cant. I show what i have already maybe some of you will notice my fault. I wont post all of the code, just the necessary parts.

This is where I create the main layout.

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

public class ResidentalsUI extends HorizontalLayout implements View{

private Grid residentalsList = new Grid();
ResidentalFormTest residentalForm = new ResidentalFormTest(this);

public ResidentalsUI(){
    buildLayout();
}
private void buildLayout(){
    HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
    actions.setWidth("100%");
    filter.setWidth("100%");
    actions.setExpandRatio(filter, 1);

    VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
    left.setSizeFull();
    getResidentalsList().setSizeFull();
    left.setExpandRatio(getResidentalsList(), 1);

    HorizontalLayout mainLayout = new HorizontalLayout(left, residentalForm);

    mainLayout.setSizeFull();
    mainLayout.setExpandRatio(left, 1);

    this.setSizeFull();
    this.addComponent(mainLayout);

}

}

public class ResidentalFormTest extends Panel{
FormLayout content = new FormLayout();
Button save = new Button("Save", this::save);
//more buttons and controlls
public ResidentalFormTest(ResidentalsUI rUI) {
    this.rUI = rUI;
    buildLayout();
}
private void buildLayout() {
    this.setSizeUndefined();

    content.setMargin(true);
    HorizontalLayout actions = new HorizontalLayout(save, cancel);
    actions.setSpacing(true);

    content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode,
            roomNumber, rfidCode,comment,equipment,equipment1,equipment2);
    actions.setSizeUndefined();

    this.setContent(content);
}

}

So from what I understood yet, I have to use a Panel because the FormLayout is not capable to show a scrollbar. I should set my root to full with .setSizeFull() and the childs to undefined with .setSizeUndefined() so it would be the size of the browser window and if something is bigger it would show a scrollbar. If I modify the VaadinKoliUI class as the following I have the scrollbar but the ui shrinks.

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    HorizontalLayout residentalsTab = new ResidentalsUI();
    residentalsTab.setSizeUndefined();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

}

Like this:

And now I don't know what to do.

But if someone has an easier and quicker idea, to make the ContactForm to scrollable please tell me.

Thanks in advance Balázs

Answer 1

I should set my root to full with .setSizeFull() and the childs to undefined...

In your case you should see the root as being your Panel and the FormLayout as the child. As per the Vaadin book:

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

The image below is a naive attempt at a visual representation:

This being said, from the moment you modified ResidentalFormTest to extend a Panel and set the FormLayout as it's content, in order to make your panel have a scroll:

• set the panel size to 100%, in ResidentalFormTest.buildLayout(): this.setSizeFull()
• set the content size to undefined so it can "expand" beyond the panel size: in ResidentalFormTest.buildLayout(): content.setSizeUndefined()

To fix the space allocation between the grid and panel I reckon a 3:1 ratio should suffice. in ResidentalsUI.buildLayout():

• mainLayout.setExpandRatio(left, 3);
• mainLayout.setExpandRatio(residentalForm, 1);

NOTE: At times it may come in handy to inspect (or experiment with changes) the rendered elements' properties, styles, etc. Some browsers (chrome, firefox) have built-in support for such developer tools, accessible through a menu or a keyboard combination such as CTRL+SHIFT+I

Answer 2

I think you should have

• VaadinKoliUI.setSizeFull
• ResidentalsUI.setSizeFull
• ResidentalsUI.residentalsList.setSizeFull
• ResidentalFormTest.setSizeFull
• ResidentalFormTest.content.setSizeUndefined
• ResidentalsUI.left.setSizeFull

I also suggest to eliminate the HorizontalLayout mainLayout in ResidentalsUI since it is a horizontal layout itself (and if possible to rename it since it isn't a UI and remove the implements View since it does not seem a view).

Your expand ratios looks good, here are the classes I would wrote:

public class VaadinKoliUI extends UI {
@Override
protected void init(VaadinRequest request) {
    TabSheet tabsheet = new TabSheet();
    ResidentalsLayout residentalsTab = new ResidentalsLayout();
    residentalsTab.setSizeFull();
    tabsheet.addTab(residentalsTab,"Lakók");
    tabsheet.setSizeFull();
    setContent(tabsheet);
}

public class ResidentalsLayout extends HorizontalLayout {

    private Grid residentalsList = new Grid();
    ResidentalFormTest residentalForm = new ResidentalFormTest(this);

    public ResidentalsLayout(){
        buildLayout();
    }

    private void buildLayout(){
        HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
        actions.setWidth("100%");
        filter.setWidth("100%");
        actions.setExpandRatio(filter, 1);

        VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
        left.setSizeFull();
        residentalsList.setSizeFull();
        left.setExpandRatio(residentalsList , 1);

        addComponents(left, residentalForm);
        setExpandRatio(left, 1);

        setSizeFull();
    }
}

public class ResidentalFormTest extends Panel {
    FormLayout content = new FormLayout();
    Button save = new Button("Save", this::save);
    //more buttons and controlls
    public ResidentalFormTest(ResidentalsLayout rUI) {
        this.rUI = rUI;
        buildLayout();
    }

    private void buildLayout() {
        setSizeFull();

        content.setMargin(true);
        HorizontalLayout actions = new HorizontalLayout(save, cancel);
        actions.setSpacing(true);

        content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, roomNumber, rfidCode, comment, equipment, equipment1, equipment2);
        content.setSizeUndefined();

        setContent(content);
    }
}

Let me know if it works as expected.