Relative horizontal padding in Valo

Flow
1

Hi all,

Simple question: Say you have two components both with expand ratios, such that they grow or shrink with the available space. Further, say that you have a padding between them, and you want this gap to grow and shrink proportionally with the sizes of the two components. How can this be expressed in Vaadin v7.5.2 with the Valo theme?

It seems that
$v-layout-spacing-horizontal
 does not accept percentage values…?

2

Not a direct answer but:
If all else fails…padding, padding-bottom, -top, … work with % - values

3

Hey John,

I tried setting $v-layout-spacing-horizontal to a % value, and it seems to work as expected (tested in 7.4.5).

Another option would be to use CssLayout and flexbox, but that requires more work/CSS knowledge. Perhaps a third option, if you can’t get the % value to work, is to use a dummy element (shown below using a Label).

HorizontalLayout content = new HorizontalLayout();
content.setSizeFull();

Button btn1 = new Button("1");
btn1.setWidth("100%");

Button btn2 = new Button("2");
btn2.setWidth("100%");

Label lbl = new Label();

content.addComponents(btn1, lbl, btn2);
content.setExpandRatio(btn1, 1f);
content.setExpandRatio(lbl, 0.01f);
content.setExpandRatio(btn2, 1f);