Search code examples
javajakarta-eevaadinvaadin7

Vaadin - maximize changeable container width


"leftContent" container in code below has fixed width (100px) and everything's ok with it. The question is: how to set mainContent's width to maximum? By maximum I mean fill all the browser's available width. For now I have scrollbar shown right next to buttons, which isn't what i've expected. I also don't wanna set fixed width in px for this 'mainContent" element.

Thanks in advance!

Main UI class:

protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout leftContent = new VerticalLayout();
    [...]
    VerticalLayout mainContent = new VerticalLayout();
    mainContent.setSizeFull();
    mainContent.setMargin(false);

    HorizontalLayout container = new HorizontalLayout();
    container.addComponents(leftContent, mainContent);
    setContent(container);

    Navigator navigator = new Navigator(UI.getCurrent(), mainContent);
    [...]
}

MainView class:

public class MainView extends Panel implements View {

@Override
public void enter(ViewChangeEvent event) {
    setSizeUndefined();
    VerticalLayout verticalLayout = new VerticalLayout();
    verticalLayout.setSizeUndefined();
    for(int i=0;i< 30;i++) {
        verticalLayout.addComponent(new Button("text"));
    }
    setContent(verticalLayout);
    setSizeFull();
}

Solution

  • For clarity this is the answer from the comment. The following code gives the main content the maximum width.

    leftContent.setWidth("100px");
    container.setExpandRatio(leftContent, 0f);
    container.setExpandRatio(mainContent, 1f);