0

PrimeFaces p:selectOneMenu items has a property called noSelectionOption which is basicly selected when no option is selected.

I would like my p:selectOneMenu to look a bit different when a value is selected or not, but nothing in HTML change on the DOMElement of the p:selectOneMenu when the noSelectionOption option is selected or not.

Any idea ?

robinvrd
  • 1,760
  • 12
  • 28
  • Isn't that option at a fixed position in the list? You should be able to use a CSS selector to style it. – Jasper de Vries Nov 06 '19 at 09:54
  • Use jquery on the ajax events to find a selected option and style the ancestor html elements – Kukeltje Nov 06 '19 at 10:12
  • @JasperdeVries nothing indicate the index of the value select in the DOM element. – robinvrd Nov 06 '19 at 10:20
  • @Kukeltje The problem with adding Javascript is that if PrimeFaces update some components, I do not know how to catch every rerender of the page (without refresh) to set the events. – robinvrd Nov 06 '19 at 10:22
  • Then you have two other possible solutions: 1) push the css spec committee to implement an ancestor selector. 2) override the PF SelectOneMenu renderer to dynamically add a class to the main div if it has a selection. – Kukeltje Nov 06 '19 at 17:46
  • any progress on this? – Kukeltje Nov 19 '19 at 11:55

1 Answers1

0

I don't see what you've missed, but the CSS class ui-noselection-option is applied to the list item (li) of the no select option. Tested with:

<p:selectOneMenu>
  <f:selectItem itemValue="0" itemLabel="0" noSelectionOption="true"/>
  <f:selectItem itemValue="1" itemLabel="1"/>
  <f:selectItem itemValue="2" itemLabel="2"/>
</p:selectOneMenu>

This now leaves you with How do I override default PrimeFaces CSS with custom styles?

For example:

.ui-noselection-option {
    color: red;
}
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • 1
    The way I read it, OP wants to style the the 'container' (e.g, make the input field yellow if nothing is selected yet). That can only be done by parent selectors. But now I think of it, a `style="#{selection.count >0}"` on the `p:selectOneMenu` should also work, but you might be right and I just assumed the question was more complex due to your answer being too obvious – Kukeltje Nov 07 '19 at 13:51
  • @Kukeltje ah, I think you are right. In that case I would go with setting a class to the component in case the bound value is empty. – Jasper de Vries Nov 07 '19 at 14:12
  • It was all about setting up a class on the label shown as the actual value (when option list is not shown) not on the option among the list. – robinvrd Nov 07 '19 at 15:01