0

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

在对话框中使用 ap:layout 时会出现问题。ap: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
  • 莫哈拉 2.1.13
  • 雄猫 7.0.30
  • 日蚀靛蓝 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 兼容，如下所述：在CSS 选择器中处理元素 ID 中的冒号。

4

1 回答 1

1

我可以重现您的问题，此问题的根源是在 primefaces 中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 并相应地更改值。

编辑

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

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

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

希望这可以帮助。

于 2012-11-19T14:42:59.323 回答