p:对话框中的嵌套div

时间:2015-04-09 09:09:36

标签: css jsf primefaces

我将访问dialogForm,以下是代码:

<div id="leftDiv">
  <div id="dialogDiv">
    <p:dialog header="Login" widgetVar="dlg1">
        <h:form id="dialogForm">
           <h:panelGrid columns="3">
               // my components
           </h:panelGrid>
        </h:form>
    </p:dialog>
   </div>
</div>

我试试:

#leftDiv #dialogDiv #dialogForm{
    background-color: red;
}

但没有奏效。

2 个答案:

答案 0 :(得分:2)

两种方式:

  1. 不推荐
  2. <h:form id="dialogForm" prependId="false">
    
    </h:form>
    
    #dialogForm{
        background-color: red;
    }
    

    jsf生成id类似于formId:component1Id:component2Id和prependId =“false”关闭当前表单的此行为

    1. 推荐
    2. <h:form id="dialogForm" styleClass="formStyleClass">
      
      </h:form>
      
      .formStyleClass{
          background-color: red;
      }
      
        

      不要在对象中放置对话框,容器喜欢具有相对定位的div或定义了不可见的溢出,在这些功能可能被破坏的情况下。这不是限制,而是DOM模型的结果。例如布局单元内的对话框,tabview,accordion就是几个例子。同样适用于confirmDialog。

答案 1 :(得分:0)

dialogForm而言,生成的html的Id属性与其JSF表示不同。您可以通过单击并选择查看源来查看您的html id属性。