web-dev-qa-db-ja.com

<h：panelGrid>の項目を右に揃える方法

下のすべてをどのようにして右端に揃えますか？

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>
cssjsf
12
curiousgeorge

<h:panelGrid> は、HTMLテーブルをレンダリングします。基本的には、レンダリングするすべてのtext-align: right;要素に<td>を適用する必要があります。現在のコードでは、以下を適用するのが最も簡単です。

#authenticate table td {
    text-align: right;
}

もちろん、もっと具体的にすることもできます。 <h:panelGrid>に独自のstyleClassを指定し、CSSでルールを定義します（レンダリングされたHTML <table>要素に直接適用されます）。

<h:panelGrid styleClass="className">

と

.className td {
    text-align: right;
}

<td>要素に繰り返し適用されるCSSクラス名のコンマ区切りの文字列を受け入れるcolumnClasses属性によって、各<td>要素に独自のクラスを与えることもできます。すべての<td>要素に同じクラスを適用する場合は、一度だけ指定します。

<h:panelGrid columnClasses="className">

と

.className {
    text-align: right;
}

追加のヒントとして、webbrowserでWebページを右クリックしてView Sourceを選択すると、JSFがすべて正確に生成しているものをよりよく理解できます。

25
BalusC

実際には同じ形式で<p:panel>を使用して、良い結果を得ました。のように見えます。

<p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>
5
newuserua

少し遅れましたが、私が必要としていたので、誰かを助けるかもしれません...

配置がこの特定のテーブルに限定されず、すべてのテーブルセルのデフォルトの形式である場合は、これをCSSファイルに追加するだけです。

td {
    text-align: right;
}

次に、すべての<td>要素は、JSFによって生成されたものも含めて、そのようにフォーマットされます。

0
neizan