Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vaadin radio buttons, horizontal rather than stacked vertical

I want to display my radio buttons in 1 line such as:

◎ Option1     ◉ Option2

However with Vaadin I cannot accomplish this it seems like the following,

◎ 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?

like image 816
small_ticket Avatar asked Jul 29 '10 07:07

small_ticket


2 Answers

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

OptionGroup group = new OptionGroup("", options);
group.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
like image 96
bekce Avatar answered Oct 20 '22 20:10

bekce


As explained in the The Book of Vaadin, you've got to define a theme to setup your own style.css file.

Then you can override the default style for the option to be displayed inline as follow:

.v-app .v-select-optiongroup .v-select-option {
    display:inline;
}
like image 43
rochb Avatar answered Oct 20 '22 19:10

rochb