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, Oct 07 '14 at 09:59
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, Oct 07 '14 at 21:19
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, Oct 07 '14 at 22:00
Unfortunately, no. I only use h:panelGroup and div. I tried panelGrid but it doesnt work as well. — RekLun, Oct 08 '14 at 00:26
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, Oct 09 '14 at 10:04
No worries. I will update the details here as well. I am going to try layout as you suggested above. Thank you for your input. — RekLun, Oct 09 '14 at 20:56

mrganser · Accepted Answer · 2019-03-10T20:10:45.643

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

Using appendTo="@this" leads me to the problem, that the selectOneMenu overflow "visible" doesnt work, because scrollbars are created... how can i fix that too? I need the selectOneMenu to stay in the correct position with appendTo="@this" but also overflows visible if the height of the dropdown is higher than the height of the dialog — Dennis F., Dec 12 '18 at 10:34
As another answer suggested, you are good using panelStyle="position:fixed;" — mrganser, Mar 10 '19 at 20:05

score 4 · Answer 2 · answered Oct 08 '15 at 18:38

4

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

answered Oct 08 '15 at 18:38

user5424606

41
1

score 0 · Answer 3 · edited Feb 18 '19 at 09:10

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.

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

3 Answers3

Linked

Related