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

Question

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

但是如果我将演示文稿设置为水平使用

checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

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

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

编辑：
我通过将复选框的样式设置为向左浮动（带有组的水平显示），找到了解决问题的快速方法。它现在在第一行显示 6 个复选框，在第二行显示 2 个。它仍然不漂亮，但比其他 2 个选项更好。我仍然期待收到更好的解决方案！（如果没有，那就这样吧，但至少我知道这是不可能的）

Answer 1

这对于 flex 框应该是可行的，因为 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 像素左右，但如果字幕更长，则更自然。

这至少对我有用。