GridLayout on iPad


The following sample is showing with a large gap between the two buttons on an iPad.

Other browsers, including an iPhone look fine.

        GridLayout gridLayout = new GridLayout(2, 1);
        //HorizontalLayout gridLayout = new HorizontalLayout(); // Workaround 1

        Button button1 = new Button();
        button1.setCaption("Button 1");
        //button1.setWidth("200px"); // Workaround 2

        Button button2 = new Button();
        button2.setCaption("Button 2");
        //button2.setWidth("200px"); // Workaround 2

On the iPad, you see the buttons momentarily as double width, then they shrink, but the GridLayout keeps the larger cell size.

With a HorizontalLayout the same thing happens with the button widths, but layout shrinks back OK - workaround 1 above.

Also, if the buttons have a definite width on the buttons, the GridLayout sizes everything correctly from the start - workaround 2.

However keen to use the column spanning in GridLayout elsewhere in the UI … this is with Vaadin 8.1.1.


that sounds like a bug. I recommend creating a ticket here:

If you can include a minimal project that reproduces the issue, that would be great.

Best regards,


Thanks, that’s been raised: