2

Vaadin Spacing

Vaadin layouts have a method setSpacing( true ) that moves widgets apart from one another. Works well in most cases. But in the case of multiple Table objects, they are still a bit too crowded.

➜ Is there some way to increase the amount of spacing used in a particular layout?

CSS

I expect the answer to be a tweak to CSS. In the Book of Vaadin page on Layout Formatting, the last section Layout Margins discusses CSS for margins. But I cannot find discussion of CSS for spacing.

Community
  • 1
  • 1
Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154

2 Answers2

0

Yes, you can increase the spacing between Vaadin components/widgets. How you do so depends on the particular kind of layout. So see the documentation for each kind of layout.

For HorizontalLayout and VerticalLayout, use the .v-spacing selector with a height or width rule.

VerticalLayout (and FormLayout)

.v-vertical > .v-spacing {
    height: 30px;
}

HorizontalLayout

.v-horizontal > .v-spacing {
    width: 50px;
}
Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
0

in your compiled css file:

.YourThemeName.v-app .v-vertical > .v-spacing {
    height: 30px;
}
d2k2
  • 726
  • 8
  • 16
  • Is there something special about the spacing rule that requires the theme name and app selector? I do not need this on other rules in my Vaadin 7.3 app, where I write rules in the `mytheme.scss` file created by the Vaadin plugin 1.1.1 for NetBeans 8. I have rules as simple as: `.example-gridlayout { border: medium dotted greenyellow; }` – Basil Bourque Aug 04 '14 at 20:48