0

いくつかの入力コンポーネントを含むモーダル ダイアログがあります。

この問題は、ダイアログ内で ap:layout を使用すると発生します。ap:layoutUnit 内の p:inputText コンポーネントは、最初はフォーカスを得ることができますが、入力テキストが表示されず、タブ キーワードを使用して他の入力フィールドに切り替えることができないため、キーボードに応答しなくなります (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>

私の環境：

  • プライムフェイス 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ハックを使用して回避策を作成できます

CSS:

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

上記の CSS を使用する前に、モーダル パネルの z-index を確認し、それに応じて値を変更することをお勧めします。

編集

次のリンクを見てください: primefaces フォーラムの p:dialog 内の p:layout に関する問題. Primefaces コンポーネントが構築されているjQuery Layout と jQuery DialogdialogLayout_settings = { zIndex: 0 }のソースを詳しく見てみると,モーダル ダイアログが次のように初期化されていることがわかります. 、したがって、 of を次のような定数値にz-index:0設定することをお勧めしますz-index<p:dialog>

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

ただし、重複を避けるために、これを他のコンポーネントでテストしてください。

お役に立てれば。

于 2012-11-19T14:42:59.323 に答える