web-dev-qa-db-ja.com

JSFパネルグリッドの上部への配置

これについていくつかの回答が投稿されているようです。それらのほとんどすべてをいくつかの順列の組み合わせで試しましたが、何も機能していないようです。

panelgris内のコンポーネントは、上ではなく常に中央に配置されます。

以下の投稿で彼らが言ったことは何でも試しました。 PanelGrid内のDataTableの配置を制御する方法は？

救済策があれば教えてください。

cssjsfprimefaces
10
user644745

<h:panelGrid>HTMLをレンダリングします<table>要素。テーブルセルの垂直方向の配置<td>デフォルトは確かにmiddleです。代わりにtopにします。これはCSSで簡単です。

<h:panelGrid styleClass="foo">

と

.foo td {
    vertical-align: top;
}

パネルグリッド内にテーブルがあり、デフォルトのテーブルセルの垂直方向の配置を中央に維持したい場合は、CSSを次のように変更する必要があります。

.foo>tbody>tr>td {
    vertical-align: top;
}

パネルグリッド自体のテーブルセルのみが上揃えになるようにします。

CSSの詳細については、 http://www.csstutorial.net を確認してください。

32
BalusC

panelGridのcolumnClasses属性を使用して、vertical-align: top;スタイルを含むCSSクラスを識別します。

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

およびCSSファイル：

.topAligned {
    vertical-align: top;
}

次に、panelGridの最初の列の内容がセル内で上揃えになります。

5
Kevin Rahe

次のサンプルコードのように、panelGridのstyleClassを使用します。

<h:panelGrid columns="2"  styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5"> 
    <p:outputLabel value="#{resources['IDNumber']}" />
    <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>

次に、cssで次のように構成します。

.top-aligned-columns td{
    vertical-align: top;
}

このメソッドを使用すると、行を上揃えにするだけでなく、包含するpanelGrid内の他のpanelGridに同じstyleClassを適用することもできます。

例えば：

   <h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
        <p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
            <h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
            <p:outputLabel value="#{resources['IDNumber']}" />
            <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}"  >
                <p:ajax event="change" process="@this" update="tvQuickScore"/>
            </p:inputText>
            <p:outputLabel value="#{resources['Name']}" />
            <p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
            <p:outputLabel value="#{resources['Surname']}" />
            <p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
        </h:panelGrid>
    </p:panel>  
</h:panelGrid>
</p:panel>
1
user2462171