Hi,
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
gridLayout.setSpacing(true);
Button button1 = new Button();
button1.setCaption("Button 1");
//button1.setWidth("200px"); // Workaround 2
gridLayout.addComponent(button1);
Button button2 = new Button();
button2.setCaption("Button 2");
//button2.setWidth("200px"); // Workaround 2
gridLayout.addComponent(button2);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.