OptionGroup horizontally

I welcome!

How to arrange elements in OptionGroup horizontally?
11778.png

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

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:



...
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;
}

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

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

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

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

I welcome you, Henri Kerola!

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