div 嵌套在 p:dialog 中

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

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

Answer 2

两种方式：

不推荐

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

</h:form>

#dialogForm{
    background-color: red;
}

jsf 生成 id，如 formId:component1Id:component2Id 和 prependId="false" 关闭当前表单的此行为

推荐

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

</h:form>

.formStyleClass{
    background-color: red;
}

Do not place dialog inside tables, containers likes divs with relative positioning or with non-visible overflow defined, in cases like these functionality might be broken. This is not a limitation but a result of DOM model. For example dialog inside a layout unit, tabview, accordion are a couple of examples. Same applies to confirmDialog as well.

div 嵌套在 p:dialog 中

Nested div in p:dialog

css

jsf

primefaces