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

Question

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

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

当我打开选择菜单并滚动鼠标滚轮时，面板将随页面 float 。

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

然后，我从展示柜中复制了源代码，滚动时面板仍然会 split 。

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

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

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

欢迎任何反馈和评论。

非常感谢。

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

问候，雷克

Answer 1

问题是，这些 float 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:

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

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

panelStyle="position: fixed;"