Multi line optiongroup


Short question (and hopefully a short solution too) : How can text displayed in an option group be split into multiple lines?
I want to display long text as an option in an option group without having it exceeding the viewable area of the application window or layout component it contains.

I have been messing around with CSS properties (white-space and word-wrap) but this does not result into the desired behavior. Or one browser does not display the layout as desired, or text is split into multiple lines but not aligned neatly compared to the selection bullet.

I have also tried to extend the OptionGroup component and explicitely set the word wrap property that exists in the class with no result. I have tried to override the buildOptions(UIDL uidl) method in VOptionGroup adding selectable Labels instead of Checkbox subclasses, but the latter does not seem that straight forward due to my very limitted experience in developing custom Vaadin components…

Any help will be highly appreciated!


For those who might be interested: the approach for writing a custom component based on the existing OptionGroup did actually work.
I had an issue with deploying the custom widgetset.

The aligment issue still exists, but at least text is being split into multiple lines based on the components width.



I also have this problem.
You can get your component ?

You can solve this with the following CSS:

.v-select-optiongroup .v-select-option {
  text-indent: -18px;
  padding-left: 18px;

.v-select-optiongroup .v-select-option label {
  white-space: normal;

Makes sure the parent DIV containing the OptionGroup does not have an explicit height set, so it will expand to accommodate its content. Alternative, do
overflow-y: auto;
on the parent DIV, so it will get scrollbars if necessary.


This solution works fine in vaadin 6 but not in vaadin 7.
Instead the long text is displayed beyond my screen by enabling auto scrollbar.

Now how can i display the text in an option group be split into multiple lines in vaadin 7?

: This issue is with IE8… In Firefox, text wrapping is happening (text is getting splitted to next line) in optiongroup but it is enabling auto scrollbar either.

I may be doing wrong somewhere. But i couldn’t figure it out. So kindly help me to come out of this issue.

Thanks in advance,