Overlapping components in GridLayout with Firefox

[mikke-alekstra]

Hello!

Vaadin GridLayout components overlap eachother with Firefox when GridLayout is updated.

In my example I have a GridLayout(2, 3) that contains Buttons in column 0 and Labels/ListSelects in column 1. Clicking on a Button switches column 1 component from Label to ListSelect or ListSelect to Label.

When a Button is clicked and the component in column 1 changes from Label to ListSelect GridLayout is not expanded enough and ListSelect component overlaps the component below.

Expected behavior (Chrome):

Actual behavior (Firefox):

Tested with Vaadin versions 8.14.3 and 8.15.2 Browser: Latest version of Firefox (Windows & Linux)

Please see my test code below.

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        Button b1 = new Button("Button 1"); 
        Button b2 = new Button("Button 2"); 
        Button b3 = new Button("Button 3"); 

        Label l1 = new Label("Label 1");
        Label l2 = new Label("Label 2");
        Label l3 = new Label("Label 3");

        ListSelect<Integer> ls1 = this.getListSelect(0, 20);
        ListSelect<Integer> ls2 = this.getListSelect(30, 50);
        ListSelect<Integer> ls3 = this.getListSelect(40, 80);

        GridLayout gl = new GridLayout(2, 3);

        gl.addComponent(b1, 0, 0);
        gl.addComponent(b2, 0, 1);
        gl.addComponent(b3, 0, 2);
        gl.addComponent(l1, 1, 0);
        gl.addComponent(l2, 1, 1);
        gl.addComponent(l3, 1, 2);

        b1.addClickListener(click -> {

            if (gl.getComponent(1, 0).equals(l1)) {
                gl.replaceComponent(l1, ls1);
            }
            else {
                gl.replaceComponent(ls1, l1);
            }

        });

        b2.addClickListener(click -> {

            if (gl.getComponent(1, 1).equals(l2)) {
                gl.replaceComponent(l2, ls2);
            }
            else {
                gl.replaceComponent(ls2, l2);
            }

        });

        b3.addClickListener(click -> {

            if (gl.getComponent(1, 2).equals(l3)) {
                gl.replaceComponent(l3, ls3);
            }
            else {
                gl.replaceComponent(ls3, l3);
            }

        });

        VerticalLayout layout = new VerticalLayout();
        layout.addComponent(gl);

        setContent(layout);

    }

    private ListSelect<Integer> getListSelect(int min, int max) {

        List<Integer> values = new ArrayList<Integer>();
        for (int i = min; i <= max; i ++) {
            values.add(i);
        }

        ListSelect<Integer> listSelect = new ListSelect<Integer>();
        listSelect.setItemCaptionGenerator(i -> "Integer " + i);
        listSelect.setRows(5);
        listSelect.setItems(values);

        return listSelect;

    }

[thevaadinman]

It seems Firefox has made some significant changes to the default sizing and general sizing rules of native widgets - the ListSelect component is just a <select> tag. We've seen several screenshots failing in Vaadin 8 because of this. A workaround for your specific test UI is to add a setHeight("100%") for every ListSelect component you create. If you adjust the size of the GridLayout a bit a setSizeFull() call would also work.

Since this intersects with my current investigation, I'll see if a solution to this issue presents itself as a side effect.