Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Customizing spacing on GridLayout

Dan Golob
5 years ago Mar 17, 2017 1:23pm

Hello. Has anyone found a way to successfully customize the amount of space between cells on the GridLayout? I found this link which details a way to do it, but it isn't working for me. I tried the setSpacing function on the GridLayout, but the spacing is just too much. Given that the layout seems to be using absolute positioning in its style, I am not even sure how to do this using the GridLayout. Any thoughts?

I am currently using Vaadin 7.6.8, but am very flexible. Any tips would be immensely appreciated.

Thanks

Pontus Boström
5 years ago Mar 20, 2017 9:31am

Hi!

If you turn on spacing, setSpacing(true), in the GridLayout and inspect the result in e.g. Chrome you will find an extra div inside the layout with the class name "v-gridlayout-spacing-on". The vertical and and horizontal spacing between cells is determined by the horizontal and vertical padding of this element. You can adjust the paddings by targeting this element in CSS.   

-Pontus

Dan Golob
5 years ago Mar 20, 2017 1:03pm

Wow, thank you so much. That was such an easy fix. Immensely appreciated.

Dan