Vaadin单选按钮，水平排列而非垂直堆叠

Question

我希望能够将我的单选按钮显示在一行，如下所示：

◎ 选项1     ◉ 选项2

然而，在Vaadin中似乎无法实现这一点，结果是像下面这样的布局：

◎ 选项1

◉ 选项2

以下是我的代码：

final List<String> options = Arrays.asList(new String[] {
                "hebele", "hubele"});
        
        final OptionGroup group = new OptionGroup("", options);
        
        group.setNullSelectionAllowed(false); // user can not 'unselect'
        group.select("hubele"); // select this by default

我该如何更改这个内容？

- small_ticket

Answer 1

使用Vaadin 7.3，Valo主题支持水平OptionGroup，无需编写自定义样式：

OptionGroup group = new OptionGroup("", options);
group.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

- bekce

Answer 2

正如在Vaadin之书中所解释的那样，您需要定义主题以设置自己的style.css文件。

然后，您可以按以下方式覆盖默认样式，使选项内联显示：

.v-app .v-select-optiongroup .v-select-option {
    display:inline;
}

- rochb

---

类名不同，但这解决了我的问题。谢谢。 - small_ticket

更新 2014年，由NetBeans的Vaadin插件 和 Eclipse的Vaadin插件 自动生成的默认项目会在自定义主题中创建一个CSS文件。因此，您只需要找到该文件并进行修改即可。在NetBeans中，路径为 Web Pages > VAADIN > themes > 我的主题 > mytheme.scss。该.scss文件使用了CSS的超集，将在 Run > Clean and Build Project操作期间自动编译为最终的CSS文件。 - Basil Bourque

Answer 3

我是这样解决这个问题的。

RadioButtonGroup<String> radioGroupGtip = new RadioButtonGroup<>();
radioGroupGtip.getStyle().set("white-space","nowrap");

- Bilisim Yenidunya