如何在没有 <h:panelGroup> 的情况下实现对齐的对话框布局？答案

【问题标题】：How achieve aligned dialog-layout without <h:panelGroup>?如何在没有 <h:panelGroup> 的情况下实现对齐的对话框布局？
【发布时间】：2012-10-11 08:41:09
【问题描述】：

我目前正在使用这个 facelet：

<p:dialog id="eventDetailsDialog">
    <h:panelGroup layout="block" styleClass="dialogElement">
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="dialogElement">
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="saveButton">
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </h:panelGroup>
    <p:messages id="allMessages"/>
</p:dialog>

连同这个样式表：

.dialogElement {
    margin: 0.2em;
}

.dialogElement label {
    width: 4em;
    display: inline-block;
}

.saveButton button {
    margin: 0 auto;
    margin-bottom: 0.2em;
    display: block;
}

创建一个标签和字段很好对齐的对话框。如果不使用围绕每个字段的<h:panelGroup>-tags，我发现无法实现此布局。这尤其成问题，因为<p:calendar> 渲染和<input>-field 旁边有一个<button>。结果应该是这样的（上面的例子为了简洁省略了一些字段，但布局是一样的）：

有没有办法实现与上述解决方案相同的布局，但不使用 <h:panelGroup> 或任何其他仅用于布局的组件（仅 CSS）？

【问题讨论】：

标签： css jsf-2 primefaces

【解决方案1】：

您可以只使用纯 HTML。

<p:dialog id="eventDetailsDialog">
    <div class="dialogElement">
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </div>
    <div class="dialogElement">
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </div>
    <div class="saveButton">
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </div>
    <p:messages id="allMessages"/>
</p:dialog>

<p> 是 semantically more correct。

<p:dialog id="eventDetailsDialog" styleClass="dialog">
    <p>
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </p>
    <p>
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </p>
    <p>
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </p>
    <p:messages id="allMessages"/>
</p:dialog>

与

.dialog p {
    margin: 0.2em;
}

.dialog label {
    width: 4em;
    display: inline-block;
}

.dialog p>button {
    margin: 0 auto;
    margin-bottom: 0.2em;
    display: block;
}

【讨论】：