パネルグリッド内のデータテーブルのアラインメントを制御する方法は？

StackOverflow https://stackoverflow.com/questions/3547485

質問

各列のように、データテーブルを備えたマルチコラムのパネルグリッドセットアップがあります。各データテーブルは異なる長さです。これにより、パネルグリッドが最大のデータテーブルに適合するように伸びます（これまでのところ、それは良いことです）。残りのデータテーブルは、トップの正当化されるのではなく、垂直に中央にあります（これは画面上で恐ろしく見えるので良くありません）。

パネルグリッドにコンテンツを最も正当化するように伝えるにはどうすればよいですか？それとも、私のアプローチは完全に間違っているので、何か違うことをする必要があります（もしそうなら、提案は大歓迎です）？

役に立ちましたか？

解決

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

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

<h:panelGrid> HTMLをレンダリングします <table> エレメント; <h:dataTable> HTMLとしてレンダリングします <table> 要素も同様です。データ要素は内部にネストされています <td> 要素、によってレンダリングされます <h:panelGrid>. 。だから、を設定します vertical-align の <td> の <h:panelGrid> に top.

それを仮定して <h:panelGrid> 持っています id これはとして終わります <table id="panelGridId"> HTMLでは、次のCSSを使用します。

#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>

すべてがトップに整列します。ルールがなければ、すべて中心になります。生成されたマークアップがどのように見えるかは不明であるため、適用する必要があるルールを伝えるのは困難です。

チュートリアル

参照：

他のヒント

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

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

}

XHTMLファイルに含めます。

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

このコードを親panelgridに追加します。

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

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

すべてのTDに適用することを避けることができます。これは、その内側のPanelgridとDatatableの内側のみです。私は同じ問題を抱えていましたが、次の問題がありました。

.pgstyle td{ 
vertical-align: top;
}

どこ pgstyle すべてのパネルグリッドに与えるスタイレクラスは、次のようなデータテーブルが含まれています。

<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
 ....
</rich:dataTable>
</h:panelGrid>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top