Adding/removing style on OptionGroup items

Vaadin 6 / 7 / 8 Framework UI
1

Hi everyone,

I have an OptionGroup with a few items which look like this :


<div class="v-select-optiongroup">
	<span class="v-radiobutton v-select-option">
		<input type="radio" name="PID3648" value="on" id="gwt-uid-8" tabindex="0" />
		<label for="gwt-uid-8">
			<div>Option 1</div>
		</label>
	</span>
	<span class="v-radiobutton v-select-option">
		<input type="radio" name="PID3648" value="on" id="gwt-uid-9" tabindex="0" checked="" />
		<label for="gwt-uid-9">
			<div>Option 2</div>
		</label>
	</span>
	<span class="v-radiobutton v-select-option">
		<input type="radio" name="PID3648" value="on" id="gwt-uid-10" tabindex="0" />
		<label for="gwt-uid-10" />
			<div>Option 3</div>
		</label>
	</span>
</div>

I’d like to add/remove style on the “v-radiobutton” span elements to distinguish which one is selected (e.g. ). Obviously the goal is to apply some CSS to this element (border, background, etc…).

Is there a way to loop on the items of the OptionGroup to add/remove style ? If I use the
getItems()
 method, I get a list of Items, but I can’t use
addStyleName(“selected”)
 on the Item object.

2

Hello again,

It seems there’s no way to do it with current Vaadin version. Could this be added in a future version of Vaadin ? I remember reading in Vaadin newsletter that no new functionnalities should be added since the RC is about to be released, but maybe for the 7.1 version :smiley:

However I’ve managed to get something working (although it’s not that nice) with CSS, so I write it here in case it could help someone else :

With the “+” CSS selector, it’s possible to style the label following the selected (checked) radio button, like this :


.v-radiobutton input[type=radio]
:checked + label {
    background-color: yellow;
    border: 1px solid;
    font-weight: bold;
}
3

Hi Pablo. It seems that currently the framework does not make it possible to give individual style names to the items in OptionGroup. I think at least the selected item should automatically get the “selected” style.

Please write an enhancement ticket.

4

Hi,

the
FlexibleOptionGroup
 add-on might just do what you want, since each option is also an AbstractComponent, allowing you to add and remove style names.

5

Hi, I also think a “selected” style should be added to this kind of components, so I’ll make an enhancement ticket.

6

Hi and thanks for your suggestion, I was trying to avoid the FlexibleOptionGroup since I thought it was a simple request and I could achieve it without it, plus we’re trying to have the lowest DOM element number possible.