Question

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

但如果我使用

将演示文稿设置为水平

checkBoxGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

然后8个项目没有足够的空间。所以我不得不使用垂直风格，但我对此并不满意。

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

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

Answer 1

这应该适用于flex box，因为CheckBoxOptions是div中的跨度。所以我们需要为checkBoxGroup添加flex css规则。

首先添加stylename

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

然后在你的主题

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

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

E.g。如果你有

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

你需要粗鲁的500px左右，但如果标题更长，更自然。

至少这对我有用。

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

1 个答案: