GridLayout elements are overlaps

Hello, I got the problem with grid layout, want to create 3 x 3 grid with checkBoxes - ine the end I get component where this checkBoxes are overlaps; when I make one column and 3 row the elements are under themselves, one by one ;
for example I paste some code in to my project from vaadin book site - and the problem is the same - buttons are overlps with themselves in 1x1 cell

// Create a grid layout
            final GridLayout grid = new GridLayout(3, 3);
            
            grid.setWidth("400px");
            grid.setHeight("200px");
            
            Button topleft = new Button("Top Left");
            grid.addComponent(topleft, 0, 0);
            grid.setComponentAlignment(topleft, Alignment.TOP_LEFT);
            
            Button topcenter = new Button("Top Center");
            grid.addComponent(topcenter, 1, 0);
            grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER);
            
            Button topright = new Button("Top Right");
            grid.addComponent(topright, 2, 0);
            grid.setComponentAlignment(topright, Alignment.TOP_RIGHT);
            
            addComponent(grid);

any idea? any solution :confused:

Hi!

I don’t have a problem with your code and layout, see my screenshot. Which version of Vaadin are you using, which browser, and what is the parent container of the grid?
13363.jpg

I try this in private class which extends verticalLayout, public class is extends class which extends CustomComponent
I use vaadin 7.0.6 - I checked in parent class and the problem is the same, all elements are overlaps