1

私は現在このフェイスレットを使用しています：

<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>フィールドが<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 に答える