Question

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

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

设置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 Extensions 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

中的<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并相应地改变它。

修改

在primefaces论坛上查看以下链接Problem with p:layout inside of p:dialog，仔细查看构建了哪些primefaces组件的jQuery Layout and jQuery Dialog的来源，您可以看到dialogLayout_settings = { zIndex: 0 }模态对话框已使用z-index:0初始化，因此我建议您将z-index的{{1}}设置为某个常量值，例如

<p:dialog>

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

希望这有帮助。

p：p中的inputText：layoutUnit在p：dialog中不起作用

1 个答案: