Vaadin Switches, Horizontal, Not Vertical

Question

I want to display my radio buttons in 1 line, for example:

◎ Option1 ◉ Option2

However, with Vaadin, I can’t do this, it looks like this:

◎ Option1

◉ Option2

here is my code:

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 

How can i change this?

Answer 1

As explained in The Book of Vaadin , you must define a theme to customize your own style.css file.

You can then override the default style for the option displayed on the line as follows:

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

Answer 2

With Vaadin 7.3, the Valo theme supports the horizontal OptionGroup without writing a custom style:

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