Question

我想在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

我该如何改变？

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我像下面这样解决了这个问题。

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

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

3 个答案: