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

Question

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

但是如果我使用

将演示文稿设置为水平

checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

那么8个项目不够space。所以我被迫使用垂直样式，但我对此并不满意。

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

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

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 像素左右，但如果字幕更长，则更自然。

这至少对我有用。

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

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

vaadin

vaadin8