p:selectOneMenu下拉部分滚动且未保持在原位 [英] p:selectOneMenu dropdown part scrolls and does not stay in position

问题描述

我正在将PrimeFaces 5.0.5与GlassFish服务器3.1.2.2一起使用.

I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.

我在<ui:fragment>内添加了一个selectone菜单，然后将其包含在另一个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?

任何反馈和评论都值得赞赏.

Any feedback and comment are appreciated.

非常感谢.

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是使用绝对定位创建的，当您使用布局或对话框或破坏页面流程的东西时，这些即使您滚动布局或容器，面板"也将保持在相同的绝对位置，因为默认情况下它们是附着在主体上的.

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屋！