Search code examples
javacssgwtvaadinvaadin8

Vaadin 8 Grid Layout remove excess space between row

I am using Vaadin 8 GridLayout to display label and textfield and need to customize the spacing between cells. I tried the setSpacing function on the GridLayout, but the spacing between rows is way too much. I have attached a snapshot of the gridlayout with excessive vertical spacing between rows. I also, tried changing the css file but dint work.

gridLayout.setSpacing(true);

.mygrid .v-gridlayout-spacing-on 
{
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
gridLayout.addStyleName("mygrid");

enter image description here

Appreciate if anyone could help me solve this problem.

Solution

  • The way described on the Vaadin forum is such as:

    .mygrid .v-gridlayout-spacing-on {
    width: 10px; 
    height: 10px; 
}

    I find this works to increase the spacing, but it couldn't reduce the gap by much.

    This also works, but seems to offer better control over narrow spacings:

    .mygrid .v-gridlayout-spacing-off {
    padding-left: 10px;
    padding-top: 2px; 
}

    - clearly with gridLayout.setSpacing(false) .