Vaadin 8 - Is there a way to split a CheckBoxGroup into 2 rows?

Question

I have a CheckBoxGroup that shows 8 items. The default presentation is vertical, which does not really look good in my layout.

But if I set the presentation to horizontal using

checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

then the 8 items do not have enough space. So I am forced to use the vertical style but I am not at all content with that.

Is there a way to show a single CheckBoxGroup horizontally, but using 2 (or more) rows?

Edit:
I have found a quick-fix to the problem by styling the checkboxes to be floating to the left (with horizontal presentation of the group). It now shows 6 Checkboxes on the first line, and 2 on the second line. It is still not beatiful, but better than the other 2 options. I am still looking forward to receiving a better solution! (if there is none, then so be it but at least I then know that it is not possible)

score 5 · Accepted Answer · answered Apr 13 '18 at 18:30

This should be doable with flex box, since CheckBoxOptions are spans in div. So we need to add flex css rules for the checkBoxGroup.

First add stylename

checkBoxGroup.addStyleName("my-flex-checkboxgroup")

Then in your theme

.my-flex-checkboxgroup {
  display: flex;
  flex-wrap: wrap;
  width: XXXpx
  height: auto;
}

You need to set the width XXX so that four columns fit

E.g. if you have

CheckBoxGroup checkBoxGroup = new CheckBoxGroup();
checkBoxGroup.setItems("Option 1","Option 2","Option 3","Option 4","Option 5","Option 6","Option 7","Option 8");

You need rougly 500px or so, but if captions are longer, more naturally.

This worked for me atleast.

Vaadin 8 - Is there a way to split a CheckBoxGroup into 2 rows?

1 Answers1