8

各列として dataTables を使用して、複数列の panelGrid をセットアップしました。各 dataTables の長さは異なります。これにより、最大の dataTable に合わせて panelGrid が拡張されます (これまでのところ、これで問題ありません)。残りの dataTables は、上揃えではなく、垂直方向の中央に配置されます (画面上では見栄えが悪いため、これは適切ではありません)。

コンテンツを上揃えにするように panelGrid に指示するにはどうすればよいですか? または、私のアプローチは完全に間違っていて、何か違うことをする必要がありますか (そうであれば、提案は大歓迎です)?

4

3 に答える 3

8

JSFはHTMLとしてレンダリングされ、CSSでスタイルを設定できます。次のように要素を検査します。

  1. ブラウザでJSFページを表示します。
  2. ページを右クリックします。
  3. [ソースの表示]を選択します。

はHTML要素<h:panelGrid>をレンダリングします。HTML要素としても<table>レンダリングされます。データ要素は要素内にネストされ、によってレンダリングされます。したがって、ののをに設定します。<h:dataTable><table><td><h:panelGrid>vertical-align<td><h:panelGrid>top

がHTMLのように終わると仮定して<h:panelGrid>、次のCSSを使用します。id<table id="panelGridId">

#panelGridId>tbody>tr>td { 
    vertical-align: top;
}

フォーム

グリッドがフォームの一部である場合、CSSにはフォームのIDを含める必要があります。例えば：

<form id="amazingForm">
  <h:panelGrid id="amazingGrid">
    ...
  </h:panelGrid>
</form>

CSSは次のようになります。

#amazingForm\:amazingGrid > tbody > tr > td {
  vertical-align: top;
}

例

これは、CSSを使用して構成されたテーブル内で機能する垂直方向の配置を示すHTMLドキュメントの例です。

<!-- language: html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3547485</title>
        <style>#myid>tbody>tr>td { vertical-align: top; }</style>
    </head>
    <body>
        <table id="myid">
            <tbody>
                <tr>
                    <td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
                    <td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

すべてが上に揃えられます。ルールがないと、すべてが中央に配置されます。生成されたマークアップがどのように見えるかが不明確であるため、どのルールを正確に適用する必要があるかを正確に判断するのは困難です。

チュートリアル

参照：

于 2010-08-23T14:58:46.073 に答える
6

CSS を使用して、パネルグリッドを上揃えにすることができます。

.mystyle {
vertical-align: top;
horizontal-align: center;

}

xhtml ファイルに含めます。

<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>

このコードを親パネルグリッドに追加します。

 <h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">

注：3列の場合、3回含める必要があります

于 2012-10-22T11:09:29.173 に答える
1

すべての td に適用することを避けることができます。panelGrid とその中の datatable 内のみです。私は同じ問題を抱えていましたが、次のことがうまくいきました：

.pgstyle td{ 
vertical-align: top;
}

pgstyleは、すべての panelGrid に指定する styleClass であり、次のようなデータテーブルが含まれています。

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
于 2015-03-09T15:52:31.393 に答える