p:selectOneMenu dropdown part scrolls and does not stay in position

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

So one way to solve this would be to attach them to themselves so the absolute panel appears next to the select in the flow of the page and doesn't move with those "inside scrollings":

<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 attribute appendTo:

Appends the overlay to the element defined by search expression. Defaults to document body.

If you are using it inside a dialog, the panel could be cut by the dialog height, because it's styled with overflow: hidden. So another solution would be to apply position: fixed, you can do that with:

panelStyle="position: fixed;"

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

Tags:

Jsf

Primefaces