P: selectOneMenu the dropdown part of the scroll and does not stay in position

Question

I am using PrimeFaces 5.0.5 with GlassFish 3.1.2.2 server.

I added selectonemenu inside <ui:fragment> , which is then included in another XHTML page.

When I open the selection menu and scroll the mouse wheel, the panel will float with the page.

At first, I try to edit the CSS file, as I assumed that this might be a position problem, but it is not.

Then I copied the source code from the storefront and the panel still crashes when scrolling.

Both simple HTML drop- <h:selectOneMenu> and <h:selectOneMenu> are good, and I have no idea why it doesn't work with <p:selectOneMenu> .

I can find some posts about this issue, but they are related to an older version of PrimeFaces.

Is the problem still there or fixed in 505? If so, how to solve this problem?

Any feedback and comments are welcome.

Thank you very much.

p: selectOneMenu drop-down list not bound to component inside dialog box

 <ui:fragment xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui"> <h:panelGroup id="cPanel" layout="block" styleClass="contentArea product"> <div class="mainColumnContainer"> <div class="mainColumn"> ... <div id="try"> <form> ... <h:panelGroup> <h:form> <p:messages autoUpdate="true" /> <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"> <p:outputLabel for="console" value="Basic:" /> <p:selectOneMenu id="console" value="#{selectOneMenuView.console}"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> <f:selectItem itemLabel="PS4" itemValue="PS4" /> <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> </p:selectOneMenu> <p:outputLabel for="car" value="Grouping: " /> <p:selectOneMenu id="car" value="#{selectOneMenuView.car}"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItems value="#{selectOneMenuView.cars}" /> </p:selectOneMenu> <p:outputLabel for="city" value="Editable: " /> <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItems value="#{selectOneMenuView.cities}" /> </p:selectOneMenu> </h:panelGrid> ... 

Regards, Rek

Answer 1

The fact is, these floating divs are created with absolute positioning, and when you have layouts or dialogs or things that disrupt the page flow, these p:selectOneMenu " p:selectOneMenu remain in the same absolute position, even if you scroll the layout or container, because they are attached to the body by default.

Thus, one way to solve this problem would be to attach them to yourself so that the absolute panel appears next to the selection in the page stream and does not move with these "internal scrolling":

 <p:selectOneMenu id="console" value="#{selectOneMenuView.console}" appendTo="@this"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> <f:selectItem itemLabel="PS4" itemValue="PS4" /> <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> </p:selectOneMenu> 

Using the appendTo attribute:

Adds an overlay to the element specified by the search expression. By default, the body of the document is used.

Answer 2

You can use panelStyle = "position: fixed;" in selectOneMenu