Css p:p:layoutUnit中的inputText在p:dialog中不起作用

我有一个模态对话框，其中包含一些输入组件

当在对话框内使用p:布局时，会出现此问题。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>

或者，如果您只想将其用于特定对话框：

#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兼容，如下所述：。

我可以重现您的问题，此问题的根源是

z-index:1003

，当在primefaces

中使用
modal=true
属性时自动插入该属性

您可以使用一个小的css破解来解决问题

css:

.ui布局窗格西
{
z索引：1008！重要；/*任何高于模态对话框z索引的值*/
}

在使用上述css之前，我建议您检查modal面板的z索引，并相应地更改值

编辑

查看primefaces论坛上的以下链接，仔细查看primefaces组件的构建来源，您可以看到
dialogLayout\u设置={
zIndex:0
}
模式对话框初始化为
z-index:0
，因此我建议您将
的
z-index
设置为某个常量值，如

.ui对话框{z-index:1005！重要；}

但是，请使用其他组件进行测试，以避免重叠

希望这有帮助。
不确定，但尝试将
appendToBody=“true”
添加到您的
p:dialog
中。我尝试过，但没有改变。有价值的hack，但z索引值并不总是相同的。如果更新页面，则模式对话框的z索引每次都会增加。此外，只有布局组件内的输入组件受到影响。您能解释一下，是什么其他组件导致了问题吗？在我的代码示例中，由于您指出的z索引问题，对话框包含一些输入组件，只有布局内的组件不工作。感谢链接（我在这里发帖之前搜索了PrimeFaces论坛，但是我错过了那篇帖子）。我会试试你对ui对话框风格的建议。
#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; }