p：p中的inputText：layoutUnit在p：對話框內不起作用

Question

我有一個包含一些輸入組件的模式對話框。

在對話框內使用p：layout時出現問題。 ap：layoutUnit中的p：inputText組件可以在第一時間獲得焦點，但隨後它對鍵盤無響應，因爲沒有顯示輸入文本，也無法使用tab關鍵字切換到其他輸入字段（I只能用鼠標切換到另一個輸入組件）。

設置模態=「假」解決問題，但我需要一個模態對話框。

這裏是我的代碼：

<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
• 的Tomcat 7.0.30
• Eclipse的靛藍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 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論壇下面的鏈接Problem with p:layout inside of p:dialog，以在jQuery Layout and jQuery Dialog其源primefaces組件內置仔細一看，你可以看到，dialogLayout_settings = { zIndex: 0 }模式對話框與z-index:0初始化，因此，我建議你的<p:dialog>的z-index設置爲某個恆定值，如

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

如何永遠不要與其他組件一起測試，以避免重疊。

希望這會有所幫助。