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

Question

I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.

I added a selectonemenu inside a which is then included in another XHTML

Answer 1

I had a very similar problem, and the selecOneMenu element was placed in a dialog window in a table cell, and the dropdown was moving along with the parent while scroling. Both solutions appendTo="@this" and panelStyle="position:fixed;" works fine, however having p:selectOneMenu element as a part of a datatable makes the dropdown hidden "under" the element it is in. The panelStyle="position:fixed;" fixed completely the problem, as it remains at that position regardless of scrolling on the top of the element it is in.

Answer 2

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;"

Answer 3

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