Multiple CssLayouts within VerticalLayout

General
1

I have attached two views of my screen, one is the normal view while the other is when I resize my browser window(or when wrapping takes place).Actually I have multiple CssLayouts within a VerticalLayout.

What actually I am doing is I have a UI class extends CssLayout providing general functionality that I have some items in a drop down. When any of the item is selected , a label is added showing that item is selected,having a cross button which removes the label means that the selection is cancelled. The items will be wrapped when reach the end of the width.

I need the above functionality mutiple times so I am placing these CssLayouts in a Vertical layout which is inside a Panel,therefore, when the height of that vertical layout exceeds the panel’s height scroll bars will appear which is fine.

Now the issue is the wrapping, as shown in the view.Due to the presence of multiple CssLayouts .What is desired is that when any css layout wraps the layout below moves down so that they’ll not overlap ,as they are doing right now.

May be I am missing something or not using these correctly.Any help to solve this issue is appreciated.
Cheers
17137.jpg
17138.jpg

2

What theme and Vaadin version are you using? Do you set any specific height on the components? I created a small test application and had no overlapping when the components wrap in Valo nor Reindeer.

Perhaps my test case is insufficient. Could you provide a test application?

Just for reference, here’s what I was testing with:

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        layout.setSpacing(true);
        
        Panel panel = new Panel();
        VerticalLayout panelLayout = new VerticalLayout();
        
        for (int i = 0; i < 3; i++) {
            CssLayout row = new CssLayout();
            row.addComponents(createLabel(), createLabel(), createComboBox());
            panelLayout.addComponent(row);
        }
        
        panel.setContent(panelLayout);
        layout.addComponent(panel);
        setContent(layout);
    }

    public Label createLabel() {
        Label label = new Label("Lorem Ipsum");
        label.setWidth("300px");
        return label;
    }

    public ComboBox createComboBox() {
        ComboBox cb = new ComboBox();
        cb.setWidth("300px");
        return cb;
    }