OptionGroup horizontally

Flow
1

I welcome!

How to arrange elements in OptionGroup horizontally?
11778.png

2

Hi,

this can be done with CSS, and it is explained in the Book of Vaadin
here
 (scroll a bit up from the figure linked).

–
Tepi

3

I welcome you, Teppo Kurki ! To see glad again you!

Yes, I try to make all as shown in an example, however that we have:

4 


...
private static final List<String> period = Arrays.asList(new String[] {"...", "..." });
...

OptionGroup periodSelect = new OptionGroup("", period);
periodSelect.setItemEnabled("...", false);        
periodSelect.setItemEnabled("...", false);
periodSelect.setItemEnabled("...", false);
periodSelect.setNullSelectionAllowed(false); 
periodSelect.select("..."); 
periodSelect.setImmediate(true); 

HorizontalLayout periodCheckLayout = new HorizontalLayout();
periodCheckLayout.setSpacing(true);
periodCheckLayout.setMargin(true, true, true, true);

periodCheckLayout.addComponent(periodSelect);
...

I try to redefine CSS Rules:


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

.v-select-optiongroup-horizontal {
    white-space: nowrap;
}

.v-select-optiongroup-horizontal .v-select-option.v-radiobutton {
    padding-right: 10px;
}
5

I apologize for fragments a question, the portlet readdressed on “Message board is temporary unavailable”, therefore it was necessary to break on some.
11779.png

6

Hi,

there is a working example with code+css
here
. You should probably define a style name for the horizontal option group and use that in your css. Also, do make sure that your css is actually in use (the correct theme is set).

–
Tepi

7

Yes, you are right once again - it is necessary to fill out just a style name -


...
periodSelect.addStyleName("horizontal");
...

Many thanks for the reference on
Book of Vaadin Examples
 ! There many interesting examples which I didn’t see earlier! Thanks, Tepi!
11780.png

8

In addition to that CSS way, you could also use the
FlexibleOptionGroup
 add-on, Labels and HorizontalLayout to create a horizontal OptionGroup.

9

I welcome you, Henri Kerola!

Thank you very much! I will necessarily try also this variant!