setExpandRatio in HorizontalLayout

Hello All,

I’m new to Vaadin and i’m strugling with the HorizontalLayout and the setExpandRatio.

I want to create a sidebar similar to the one that is shown in the quicktickets demo. I’m trying to create an Horizontal layout with a menu and a content area. The menu sould have a limited width and the contetn area should expand to use the rest of the available area.

My code so far is:


public class MainUI extends UI
{
    private CssLayout root = new CssLayout();
   
    @Override
    protected void init(VaadinRequest request) {
        root.setSizeFull();
        setContent(root);
        
        // Main View:
        HorizontalLayout mainView = new HorizontalLayout();
        mainView.setSizeFull();
        
        // Menu:
        VerticalLayout menu = new VerticalLayout();
        Button add = new NativeButton("Add new item");
        menu.addComponent(add);
        menu.setWidth("10%");

        // Content:
        VerticalLayout content = new VerticalLayout();
        
        // Table:
        Table t = new Table();
        t.addContainerProperty("A", Long.class,  null);
        t.addContainerProperty("B",  String.class,  null);
        t.addContainerProperty("C", Date.class, null);
        
        content.addComponent(t);
       
        mainView.addComponent(menu);
        mainView.addComponent(content);

        mainView.setExpandRatio(content, 1);
        
        root.addComponent(mainView);
    }

My problem is setting the menu width. I was expecting the menu area to have a 10% width of the mainView layout. But what i get instead is that the content area expands to full size and the menu is hidden:

If I remove the setExpandRatio, it will, as expected, use 50% of the mainView layout.

I have tested a similar scenario using a VerticalLayout and the setExpandRatio works as I expected in that case.
Can someone point out what i’m doing wrong?

Hi Pedro!

Try to set expand ration to both components added to your HorizontalLayout. And set full size of menu instead of 10%.


menu.setSizeFull();
mainView.setExpandRatio(content, 0.9f);
mainView.setExpandRatio(menu, 0.1f);

Alex.

Hey Alex, thank you for the fast reply.
That did the trick, thanks!

Why is there a different behaviour when using the VerticalLayout? On my previous tests with VerticalLayout I only set the expandRatio for one of the components.

In fact there is no difference between HorizontalLayout and VerticalLayout behavior. Book of Vaadin says that you should set size of components to 100% before using expand ratio. See
Layout Formatting
for more information.

Regards, Alex