Remove spacing between the first row and second row in the Gridlayout - vaadin

Question

Thank you very much for your help in advance.
Let me explain the problem,
I have grid layout where I am adding the labels in the first row (its called header row). In the next 5 rows, I am adding text field, combo and date fields.
The problem I am facing is, I would like to remove the space between header(first) row and second row and continue to have default space from second row to the last rows. I have highlighted the space as red line in the snapshot
Please find the snapshot in attachment.
Any hints, please advise.

Answer 1

As I've mentioned in the comments, position of a component in a GridLayout defined by a top value in css. So you would need to change it if you want to re-position(remove space, in this case) an element. The problem here is that
GridLayout not necessary starts from top, so you would need to figure out a correct value for a top,
and then you would need to differentiate a correct component(label in this case) using :n-th child, since a class name applied to a component, is not propagated to a parent's v-gridlayout-slot.
As for an alternative, you could add a common styleName to all components (except labels) and using this style set margins(left, right, bottom)to all the components. (In the example below used a pink color to verify styles are applied.)
In this scenario, output is like this:
The css part:
.addPadding{
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
background-color: pink;
}
Code used:
setContent(addGridLayout())
////
private GridLayout addGridLayout(){
// Create a 4 by 4 grid layout.
GridLayout grid = new GridLayout(4, 4);
//grid.setSpacing(true);
grid.addStyleName("example-gridlayout");
// Fill out the first row using the cursor.
for (int i = 0; i < 4; i++) {
Label l=new Label("Col " +
(grid.getCursorX() + 1));
grid.addComponent(l);
grid.setComponentAlignment(l,Alignment.BOTTOM_CENTER);
}
// Fill out the first column using coordinates.
for (int i = 1; i < 4; i++) {
TextField x=new TextField();
x.addStyleName("addPadding");
grid.addComponent(x, 0, i);
}
// Fill out the secondcolumn using coordinates.
for (int i = 1; i < 4; i++) {
TextField x=new TextField();
x.addStyleName("addPadding");
grid.addComponent(x, 1, i);
}
// Fill out the third column using coordinates.
for (int i = 1; i < 4; i++) {
DateField x=new DateField();
x.addStyleName("addPadding");
grid.addComponent(x, 2, i);
}
// Fill out the third column using coordinates.
for (int i = 1; i < 4; i++) {
ComboBox x=new ComboBox<String>();
x.addStyleName("addPadding");
grid.addComponent(x, 3, i);
}
return grid;
}

Answer 2

if the columns have fixed width you could create 2 GridLayouts one for the header and one for the content. Both of them should have no margin and the layout that contains them should have no spacing.