p:selectOneMenu下拉部分滚动并且不会保持原位

Question

我正在使用PrimeFaces 5.0.5和GlassFish服务器3.1.2.2.

我在<ui:fragment>其中添加了一个selectonemenu ,然后将其包含在另一个XHTML页面中.

当我打开选择菜单并使用鼠标滚轮滚动时,面板将随页面一起浮动.

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

然后,我从展示中复制了源代码,滚动时面板仍然分开.

这两个纯HTML下拉列表<h:selectOneMenu>都很好,我不知道它为什么不能使用<p:selectOneMenu>.

我可以找到一些提及此问题的帖子,但它们与旧版本的PrimeFaces有关.

问题仍然存在或在505中修复？如果是,我该如何解决这个问题？

任何反馈和评论都表示赞赏.

非常感谢.

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

问候,雷克

Answer 1

问题是这些浮动div是用绝对定位创建的,当你有布局或对话框或破坏页面流的东西时,p:selectOneMenu即使你滚动布局或容器,这些"面板"也会保持在同一个绝对位置,因为它们默认附着在身体上.

因此,解决此问题的一种方法是将它们附加到自身,以便绝对面板出现在页面流中的选择旁边,并且不会随着那些"内部滚动"移动:

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

将叠加层追加到搜索表达式定义的元素.默认为文档正文.