Altering the colour or style of a component (item in OptionGroup in this ca

Hi all,

In our project I would like to alter the colour of an item in an OptionGroup. My knowledge of web based development is still very limited. This seems to require a CSS or dynamically altering the CSS of the item. How would I go about this? I’ve tried to find how one could get the style of a given item, but it has not proven fruitful. From what I’ve found on the Internet it is possible to alter the stylesheet dynamically through CSS injection, but for this the style object must be available. How can I get hold of the style of an item in an OptionGroup?

Hey Frans,

I don’t think it’s currently possible to add style names for individual option group items.
You could use checkboxes instead, or if the option group’s content is fixed, you could target its children with > *:nth-child().

.v-select-optiongroup > span:nth-child(1) {
  color: blue;
}

Hey Joacim,

Thanks for the reply. For the period that the colorisation is applicable, the content is fixed. Let me see if this is a workable solution. I must still see how to alter this from the Java code. The dynamic altering of the CSS came across my path, but getting the correct class in my claws has not been possible yet…

This does seem to do the job, thanks a million!

My childlike enthusiasm was premature :frowning: Closer inspection showed that this got it all wrong. As an alternative I’ve coupled the optiongroup to a beanscontainer and used a property in the underlying class as a display field. The display accepts html and is formatted according to the required colour. The correct colour is displayed for the first instance of the field, but updates don’t get propegated correctly. How can I convince the selection to reload the display fields?

I see that when I select an item in the optiongroup the fields are reloaded. I guess there must be some way to trigger this directly…

Frans, do you think that replacing the option group with checkboxes instead would work? They at least allow for easier customisability.

I could try it some time. At this point I’m considering to toggle a selection to trigger an update. It is messy, but maybe it will work. The rest is obviously all added, now… Just the update is required.

Issuing a “select” or “unselect” on one of the elements forces a refresh… A princess by day, an ogre by night! Code below tickles the UI enought to update.

public void updateItemsList(Item item)
    {
        if(itemsList.isSelected(item))
        {
            itemsList.select(item);
        }
        else
        {
            itemsList.unselect(item);
        }
    }