Page 1 of 1

p:selectOneMenu advanced missing styling

Posted: 25 Jul 2019, 09:08
by Dsleeper
When using the "advanced" feature of p:selectOneMenu with the Roma theme the selections in the dropdown does not have any hover or select styling applied to them.

As you can see in this example when doing a selection in the dropdown list nothing is highlighted:

Example code from the above image:

Code: Select all

<p:selectOneMenu id="toSoftware" value="#{}" effect="none" required="true"
										style="width: 400px;" panelStyle="width: 380px;" filter="true" filterMatchMode="contains"
										converter="omnifaces.SelectItemsConverter" var="tsc">
										<f:selectItem itemLabel="Velg en" itemValue="#{null}" noSelectionOption="true" />
										<f:selectItems value="#{viewSystemComponent.componentsSelectList}" var="sc" itemLabel="#{}"
											itemValue="#{sc}" />

										<p:column style="width: 70px;">
											<img src="#{tsc.imageURL}" jsf:rendered="#{!empty tsc.imageURL}" class="responsiveImage" />
											<img src="#{tsc.type.imageURL}" jsf:rendered="#{!empty tsc.type.imageURL and empty tsc.imageURL}"
												class="responsiveImage" />

											<h:outputText value="#{}" />
											<br />
Is there a simple styleClass workaround for this? Can you replicate this behaviour at your end and provide a patch to the theme? Or perhaps I am missing something?

Re: p:selectOneMenu advanced missing styling

Posted: 29 Jul 2019, 10:01
by aragorn
Thanks a lot for the sample code. Fixed now. Please add the following SCSS code to _theme_styles.scss file and then provide new theme css files;

Code: Select all

/* Add your customizations of theme here */
body {
    .ui-selectonemenu-panel {
        .ui-selectonemenu-filter-container {
            width: 100%;

        .ui-selectonemenu-items {
            .ui-selectonemenu-item {
                &.ui-state-hover {
                    background-color: $inputListItemHoverBgColor;
                    color: $inputListItemHoverTextColor;

                &.ui-state-highlight {
                    background-color: $inputListItemHighlightBgColor;
                    color: $inputListItemHighlightTextColor;
Best Regards,