Option group layout

Vaadin 6 / 7 / 8 Framework UI
1

HI All!

Is there a way to make OptionGroup Horizontally Aligned?

Thanks.

2

Have [tt]
display: inline-block
[/tt] for the option elements.

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

For the above rule, use [tt]
addStyleName(“horizontalgroup”)
[/tt] for the option group.

See an
on-line example
.

3

Thanks for the css magic

4

Hi, I’m exactly what I’m reading here and nothing happens…

my CSS:

.horizontalgroup{

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

my Option Group in an absolute layout:

OptionGroup mostrarbarra = new OptionGroup(desc, opciones);
mostrarbarra.setNullSelectionAllowed(false);
mostrarbarra.setMultiSelect(false);
mostrarbarra.select(“Side Bar”);
mostrarbarra.addStyleName(“horizontalgroup”);
mostrarbarra.setImmediate(true);

	addComponent(mostrarbarra, "right: 30px; bottom: 30px;");

please help!!!

regards, and thank you very much!!!

5

That CSS is not correct you cannot have nested CSS definitions. Try to say:

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

Thank you very much!!, this answer really helped me…

7

Hi:

I installed the chameleon theme and the solution you gave me stopped working…How can I solve this??

thanks!!!

8

Hi,

Use “inline” instead “of inline-block”, it worked for me.