Multicolumn OptionGroup

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I would like to know whether is posible to change OptionGroup layout to a multicolumn. This OptionGroup has 24 items and it doesn’t fit well in my page with all the elements ordered vertically. I have tried to play with CSS, but no luck at the moment.

Any expericence with this?

Thanks in advance

2

Should be doable with just CSS. Here’s my try, without actually trying it out in practice:

Add style name “multicol” to the intended OptionGroup(s).


.v-select-optiongroup-multicol .v-select-option {
    float: left;
    width: 150px;
}

.v-select-optiongroup-multicol {
    width: 300px; /* Multiple of the width of individual items, specified the amount of columns */
    /* You can leave it undefined: then there will be as many columns as there is space in the layout */
}

Note, though, that when using this, the item order is from left-to-right, top-to-bottom, so the first items will be on the same line, not on the same column.

3

Thanks a lot. It did it.

Congrats for vaadin…just started yesterday with it and find it really cool.