GridLayout - margin adjustment

Hi,
I’m trying to customize the margins in a GridLayout. According to
https://vaadin.com/book/vaadin7/-/page/layout.settings.html#layout.settings.margins
it should be possible with CSS but it’s not working for me.

    @Override
    protected void init(VaadinRequest request)
        {
        GridLayout gridLayout = new GridLayout(2, 2);
        gridLayout.addComponent(new Label("1"));
        gridLayout.addComponent(new Label("2"));
        gridLayout.addComponent(new Label("3"));
        gridLayout.addComponent(new Label("4"));
        gridLayout.setMargin(true);
        gridLayout.addStyleName("mymargins");

        final VerticalLayout layout = new VerticalLayout();
        layout.addStyleName("border");
        layout.setSizeUndefined();
        layout.addComponent(gridLayout);

        setContent(layout);
        }

.border { border: 1px solid black; } .mymargins.v-margin-left { padding-left: 10px; } .mymargins.v-margin-right { padding-right: 20px; } .mymargins.v-margin-top { padding-top: 40px; } .mymargins.v-margin-bottom { padding-bottom: 80px; } All the paddings are ignored. What am I doing wrong?

The book actually gives a very bad example here, as the GridLayout behaves differently to e.g. Vertical and Horizontal Layouts. If you open up a gridlayout in e.g. FireBug (which you should be using anyway when dealing with css!), you see that the gridlayout positions each element with x and y coordinates. This means that you can change the padding on the root element as much as you want, the child elements still won’t move anywhere.

In effect, you can’t really change the margins in a GridLayout, as far as I know. You can wrap the Gridlayout inside e.g. a CssLayout, and create the margins there instead.