1

我目前正在使用这个 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>renders 和<input>-field<button>旁边有一个。结果应该是这样的（上面的例子为了简洁省略了一些字段，但布局是一样的）：

我想要的对话框

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

4

1 回答 1

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>

A<p>在语义上更正确。

<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;
}
于 2012-10-11T12:37:39.293 回答