Vaadin 8 - 有没有办法将 CheckBoxGroup 分成 2 行？

Question

我有一个显示 8 个项目的 CheckBoxGroup。默认的呈现方式是垂直的，这在我的布局中看起来不太好。

但是如果我使用

将演示文稿设置为水平

checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

那么这 8 个项目没有足够的空间。所以我被迫使用垂直样式，但我对此并不满意。

有没有办法水平显示单个 CheckBoxGroup，但使用 2(或更多)行？

编辑:
我找到了解决该问题的方法，方法是将复选框设置为向左浮动(水平显示该组)。现在，第一行显示 6 个复选框，第二行显示 2 个复选框。它仍然不漂亮，但比其他两种选择要好。我仍然期待收到更好的解决方案! (如果没有，那就这样吧，但至少我知道这是不可能的)

Answer 1

这应该可以通过弹性框实现，因为 CheckBoxOptions 是 div 中的跨度。所以我们需要为checkBoxGroup添加flex css规则。

首先添加样式名称

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

然后在你的主题中

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

您需要设置宽度 XXX，以便适合四列

例如如果你有

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

您大约需要 500 像素左右，但如果标题更长，则更自然。

这至少对我有用。