p:selectOneMenu advanced missing styling

Post Reply
Dsleeper
Posts: 118
Joined: 29 Jul 2010, 13:33
Location: Bergen, Norway
Contact:

25 Jul 2019, 09:08

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:
Image

Example code from the above image:

Code: Select all

<p:selectOneMenu id="toSoftware" value="#{viewSystemComponent.dependency.to}" 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="#{sc.name}"
											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" />

										</p:column>
										<p:column>
											<h:outputText value="#{tsc.name}" />
											<br />
											<i>#{tsc.type.name}</i>
										</p:column>
									</p:selectOneMenu>
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?
Primefaces, Mojarra, Tomcat

http://www.dsleeper.net
https://www.mylog.no

aragorn
Posts: 3706
Joined: 29 Jun 2013, 12:38

29 Jul 2019, 10:01

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,

Post Reply

Return to “Roma - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest