Remove spacing between the first row and second row in the GridLayout

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.

Version: Vaadin 8

17896828.jpg

Off my mind, you could:

  • Make the full layout a grid with ComponentRenderers. This would also make the data binding a lot easier, I guess.
  • Wrap the header row in a separate layout and adjust spacing and margins in that layout. Maybe this leads to awkward shifts between the header and the body, I don’t know.
  • Add a style to the header labels where you set off margins and spaces, or adjust the height. See in debug mode (just add ?debug to your url) where the space resides, in the header row or the first “body row”.