How achieve aligned dialog-layout without <h:panelGroup>?

Question

I am currently using this 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>

Along with this style-sheet:

.dialogElement {
    margin: 0.2em;
}

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

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

To create a dialog in which the labels and fields are nicely aligned. I have found no way to achieve this layout without using the <h:panelGroup>-tags surrounding each of the fields. It is especially problematic because <p:calendar> renders and <input>-field with a <button> next to it. The result should look something like this (the example above omits some fields for brevity, but the layout is the same):

Is there any way to achieve the same layout as the solution above, but without using <h:panelGroup> or any other components just for layout (just CSS)?

Answer 1

You can just use plain 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> is 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>

with

.dialog p {
    margin: 0.2em;
}

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

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