p:layoutUnit 中的 p:inputText 在 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，它是在primefaces <p:dialog>中使用modal=true属性时自动插入的

您可以使用一个小的 css hack 解决方法

css:

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

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

编辑

在primefaces论坛看看下面的链接Problem with p:layout inside of p:dialog，仔细看看其中primefaces组件构建的jQuery Layout and jQuery Dialog的源码，可以看到dialogLayout_settings = { zIndex: 0 }模态对话框初始化为z-index:0 ，因此我建议您将<p:dialog> 的z-index 设置为某个恒定值，例如

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

不过，请使用您的其他组件对此进行测试以避免重叠。

希望这会有所帮助。