html - Vaadinラジオボタン、縦に積み重ねるのではなく横に

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で説明されているように、独自のファイルを設定するためのテーマを定義する必要があり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");