css - p :inputText within p:layoutUnit does not work inside p:dialog

Question

我有一个包含一些输入组件的模态对话框。

当在对话框中使用 p:layout 时会出现问题。 p:layoutUnit 中的 p:inputText 组件可以在第一次获得焦点，但随后它对键盘没有响应，因为没有显示输入文本，我也无法使用 tab 关键字切换到其他输入字段(我可以只用鼠标切换到另一个输入组件)。

设置 modal="false"解决了问题，但我需要一个模态对话框。

这是我的代码:

<h:form id="outerForm">
    <p:commandButton id="button" value="Show dialog" onclick="dialogVar.show()" type="button" />

    <p:dialog id="dialog" header="inputText inside p:layout will not work" widgetVar="dialogVar" modal="true" resizable="false" closeOnEscape="true">

            <h:inputText />
            <p:autoComplete />

            <p:panelGrid columns="2">
                <h:outputLabel value="Write something" />
                <p:inputText />
                <h:outputLabel value="Write something else" />
                <p:inputText />
                <h:outputLabel value="Text Area" />
                <p:inputTextarea rows="4" cols="30" autoResize="false" />
            </p:panelGrid>

            <p:layout id="diffDialogLayout" style="height:400px;width:900px;">

                <p:layoutUnit id="diffWestUnit" position="west" size="45%">
                    <p:panelGrid columns="2">
                        <h:outputLabel value="Write something" />
                        <p:inputText />
                        <h:outputLabel value="Write something else" />
                        <p:inputText />
                        <h:outputLabel value="Text Area" />
                        <p:inputTextarea rows="4" cols="30" autoResize="false" />
                    </p:panelGrid>
                </p:layoutUnit>

                <p:layoutUnit id="diffCenterUnit" position="center">
                    <br />
                </p:layoutUnit>
            </p:layout>

            <h:inputText />

    </p:dialog>
</h:form>

我的环境:

• PrimeFaces 3.4.2
• PrimeFaces 扩展 0.6.1
• Mojarra 2.1.13
• Tomcat 7.0.30
• Eclipse Indigo SR1

编辑

建议的解决方案效果很好。该问题可以通过以下 CSS 代码解决:

.ui-dialog { z-index: 1005 !important; }
.ui-layout-pane-west { z-index: 1010 !important; }
.ui-layout-pane-center { z-index: 1010 !important; }

或者，如果您只想将它​​用于特定对话框:

#outerForm\3A diffDialog.ui-dialog { z-index: 1005 !important; }
#outerForm\3A diffWestUnit.ui-layout-pane-west { z-index: 1010 !important; }
#outerForm\3A diffCenterUnit.ui-layout-pane-center { z-index: 1010 !important; }

\3A 字符用于与 IE 6-8 兼容，如下所述:Handling a colon in an element ID in a CSS selector .

Answer 1

我可以重现你的问题，这个问题的根源是z-index:1003使用 modal=true 时会自动插入primefaces 中的属性 <p:dialog>

你可以使用一个小的 css hack 来解决问题

CSS:

.ui-layout-pane-west { z-index:1008 !important; /*any value higher than the modal dialog's z-index */ }

在使用上述 css 之前，我建议您检查模态面板的 z-index 并相应地更改值。

编辑

查看以下链接 Problem with p:layout inside of p:dialog在 primefaces 论坛上，仔细查看 jQuery Layout and jQuery Dialog 的来源其中构建了 primefaces 组件，你可以看到 dialogLayout_settings = { zIndex: 0 }模态对话框初始化为 z-index:0 , 因此我建议你设置 z-index的 <p:dialog>一些常数值，如

.ui-dialog{z-index:1005 !important;}

然而，请使用您的其他组件进行测试以避免重叠。

希望这对您有所帮助。