Primefaces p:autocomplete 下拉菜单不会超出 p:dialog答案

【问题标题】：Primefaces p:autocomplete dropdown does not go outside p:dialogPrimefaces p:autocomplete 下拉菜单不会超出 p:dialog
【发布时间】：2016-10-12 22:45:54
【问题描述】：

p:dialog 中的 Primefaces 5.2 p:autocomplete 有问题。问题是当用户在框内输入文本时，滚动对话框内会出现一个下拉菜单（见图），但我想在对话框外显示一个下拉菜单。

由于对话框位于另一个对话框的上方，我不得不使用appendTo="@this"。这是我的代码：

<p:dialog id="someid" widgetVar="someid-dialog" modal="true">
    <h:form id="someid-form">
        <p:panelGrid columns="2">
            <h:outputText value="Name"/>
                <p:autoComplete appendTo="@this" id="someid-auto" var="pr"
                                value="#{someBean.product}" itemValue="#{pr}" 
                                itemLabel="#{pr.name}#" label="Product"                                      
                                completeMethod="#{someBean.filteredProducts}"
                                converter="productConverter">                            
                </p:autoComplete>
    </h:form>
</p:dialog>

由于问题在客户端很明显，我没有粘贴我的后端代码。将表单放在对话框之外没有帮助。我对p:selectOneMenu 有同样的问题。我希望有人有一个解决方案。

【问题讨论】：

这就是你告诉它的行为。这是因为您使用了appendTo="@this"。通常，“弹出/输出”部分被附加到 html 的正文中，然后它就可以工作（有效地显示在对话框之外）。但是如果你滚动它（看起来与输入分离），它不会随着对话框的内容滚动。您可以尝试使用 css 溢出，但这也会引入其他问题。顺便说一句，这不是 PrimeFaces 特定的问题。许多其他框架也有这个问题。部分原因在于浏览器/css 的工作方式。
您可以尝试不使用 appendTo 并添加一些 'onscroll' 将弹出部分移动到的 javascript。
Kukeltje，感谢您的建议！我已经玩过不使用 appendTo 和 css（溢出），但没有成功。嗯，有趣的是，正如您所说，这不是 PrimeFaces 特定的问题，因为（例如）h:selectOneMenu 工作正常，但我需要p:selectOneMenu 或p:autocomplete 提供的搜索功能。最好的问候。
h:* 组件呈现原生 html。那没有问题。许多其他使用非原生 html 组件来创建自定义组件的框架都有这个问题
希望您尝试过appendTo="@body"，如果没有，请尝试一次，但是如果它不起作用，请在autocomplete 的panelStyle 中添加z index，确保您处理了z index 的对话问题与z-index

标签： java jsf-2 primefaces

【解决方案1】：

删除 appendTo="@this" 属性。您不想将下拉菜单附加到对话框中。

【讨论】：