p：对话框中的嵌套div

Question

我将访问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;
}

但没有奏效。

Answer 1

两种方式：

1. 不推荐

<h:form id="dialogForm" prependId="false">

</h:form>

#dialogForm{
    background-color: red;
}

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

1. 推荐

<h:form id="dialogForm" styleClass="formStyleClass">

</h:form>

.formStyleClass{
    background-color: red;
}

  

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

Answer 2

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