我正在使用PrimeFaces 5.0.5和GlassFish服务器3.1.2.2。
我在<ui:fragment>
中添加了一个selectonemenu,然后将其包含在另一个XHTML页面中。
当我打开选择菜单并使用鼠标滚轮滚动时,面板将随页面一起浮动。
最初,我尝试编辑CSS文件,因为我猜它可能是位置问题,但事实并非如此。
然后,我从展示中复制了源代码,滚动时面板仍然分开。
简单的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>
...
问候,雷克
问题是这些浮动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
属性:
将叠加层追加到搜索表达式定义的元素。默认为文档正文。
如果您在对话框中使用它,则可以通过对话框高度剪切面板,因为它使用overflow: hidden
进行样式设置。所以另一个解决方案是应用position:fixed,你可以这样做:
panelStyle="position: fixed;"
你可以使用panelStyle =“position:fixed;”在selectOneMenu中
我有一个非常类似的问题,selecOneMenu元素被放置在表格单元格的对话框窗口中,下拉列表在滚动时与父项一起移动。两个解决方案appendTo="@this"
和panelStyle="position:fixed;"
工作正常,但是将p:selectOneMenu
元素作为数据表的一部分使得下拉隐藏在它所在的元素“下面”.panelStyle="position:fixed;"
完全修复了问题,因为它保持在该位置而不管顶部滚动它所在的元素。