p:selectOneMenu 下拉部分滚动不停留在原位 [英] p:selectOneMenu dropdown part scrolls and does not stay in position

问题描述

我使用的是 PrimeFaces 5.0.5 和 GlassFish server 3.1.2.2.

I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.

我在 中添加了一个 selectonemenu，然后将其包含在另一个 XHTML 页面中.

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.

最初，我尝试编辑 CSS 文件，因为我猜测这可能是位置问题，但事实并非如此.

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.

纯 HTML 下拉列表和 <h:selectOneMenu> 都很好，我不知道为什么它不适用于 <p:selectOneMenu>.

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

我可以找到一些提到这个问题的帖子，但它们与旧版本的 PrimeFaces 相关.

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

问题是否仍然存在或已在 505 中解决?如果是，我该如何解决这个问题?

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

感谢任何反馈和评论.

非常感谢.

p:selectOneMenu 下拉菜单未附加到组件在对话框内

<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>
            ...

问候，雷克

推荐答案

问题是这些浮动的 div 是用绝对定位创建的，当你有布局或对话框或打破页面流动的东西时，这些 p:selectOneMenu 即使滚动布局或容器，面板"也保持在相同的绝对位置，因为它们默认附加到正文.

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>

使用属性appendTo:

将覆盖附加到由搜索表达式定义的元素.默认为文档正文.

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

如果您在对话框中使用它，面板可能会被对话框高度剪切，因为它的样式为 overflow: hidden.所以另一个解决方案是应用位置:固定，你可以这样做:

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 下拉部分滚动不停留在原位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！