Problems with sizing and scrollbar

Vaadin 6 / 7 / 8
1

Hello
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