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 <ui:fragment> which is then included in another XHTML page.

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

Initially, I try to edit the CSS file as I was guessing it could be a position problem but it is not.

Then, I copied the source code from the showcase and the panel still splits when scrolling.

Both plain HTML drop down list and <h:selectOneMenu> are fine and I have no idea why it doesn't work with <p:selectOneMenu>.

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

Is the issue still there or fixed in 505? If yes, how to I solve this issue?

Any feedback and comment are appreciated.

Many thanks.

p:selectOneMenu dropdown not attached to the component inside a dialog

<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

I've never paid attention to it, but the same happens to me, even in PF 5.1. — mrganser
Thank you for your comment, mrganser. I would liek to ask you a quesiotn. Did you put the selectonemenu on a dialog or inside lightbox? Seemingly, this is how the issue is triggered. Thanks. — RekLun
In my case, just having layouts triggers the problem, I just changed the attribute fullPage of the p:layout to false, and the problem dissapeared, maybe I can test this throughly tomorrow and give you an answer, do you have layouts too? — mrganser
Unfortunately, no. I only use h:panelGroup and div. I tried panelGrid but it doesnt work as well. — RekLun
Sorry I can't narrow the problem right now, it looks like happen in multiple scenarios apart from where I said, but I'll keep you updated. I personally have an open issue on this and need to solve it eventually :) — mrganser

mrganser mrganser · Accepted Answer · 2014-10-09T21:57:02

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

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

3 Answers