Vaadin 单选按钮，水平而不是垂直堆叠答案

【问题标题】：Vaadin radio buttons, horizontal rather than stacked verticalVaadin 单选按钮，水平而不是垂直堆叠
【发布时间】：2011-03-22 13:52:13
【问题描述】：

我想在 1 行中显示我的单选按钮，例如：

◎ 选项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

我该如何改变这个？

【问题讨论】：

标签： html radio-button vaadin radiobuttonlist

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如The Book of Vaadin 中所述，您必须使用define a theme 设置您自己的style.css 文件。

然后您可以覆盖选项的默认样式以内联显示，如下所示：

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

【讨论】：

类名不同，但这解决了我的问题。谢谢
更新在 2014 年，Vaadin plugin for NetBeans 和 Vaadin plugin for Eclipse 自动创建的默认项目都代表您在自定义主题中创建 CSS 文件。所以你需要做的就是找到那个文件并修改它。在 NetBeans 中，Web Pages > VAADIN > themes > my theme > mytheme.scss。该 .scss 文件使用 CSS 的超集，在 Run > Clean and Build Project 操作期间将自动编译成最终的 CSS。

【解决方案3】：

我解决了这个问题，如下所示。

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

【讨论】：