1

aをその子に適用せずstyleClassに aに適用しようとしています:h:panelGrid

<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
    <p:fieldset id="fs1" legend="fs1" style="width: max-content">  
        <h:panelGrid columns="3">
            <p:outputLabel for="id1" value="#{messages.label_application}" />
            <p:selectOneMenu id="id1" required="true" value="som">
                <f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />  
                <f:selectItems value="#{bean.availableItems}" />
            </p:selectOneMenu>
            <p:message for="id1" />
        </h:panelGrid>             
    </p:fieldset>  

     <p:fieldset id="fs2" legend="fs2" style="width: max-content">  
         <h:panelGrid columns="3">
             <!--more fields-->     
         </h:panelGrid>  
     </p:fieldset>
</h:panelGrid>

私のtopAligned CSS：

.topAligned td{
    vertical-align: top !important;
}

styleClass問題は、2 つのフィールドセットを上に揃える必要があり、それが I apply でうまく機能することですが、これstyleClassはすべての子にも適用されます。したがって、2 つのフィールドセットのすべてのフィールド ( outputLabel、selectOneMenuなど) も上揃えになります...

この質問から上部の配置を指定するためにさまざまな方法をすべて試しましたが、成功しませんでした... HTMLソースも見ようとしましたが、すべてのjsfおよびprimefacesのものと少し混乱します...

うまくいく裏技を知っていれば…

4

1 に答える 1

2

と

.topAligned td{
    vertical-align: top !important;
}

および JSF によって生成された HTML 出力

<table class="topAligned">
    ...
</table>

基本的に、ネストされたのすべての <td>要素にスタイルを適用しています。<table><table>

<td>親の直下の要素のみにスタイルを適用する場合は、代わりに属性<table>を使用する必要があります。columnClasses

<h:panelGrid ... columnClasses="topAligned,topAligned">

と

.topAligned {
    vertical-align: top;
}

これは、生成された HTML 出力で次のようになります。

<table>
    <tbody>
        <tr>
            <td class="topAligned">...</td>
            <td class="topAligned">...</td>
        </tr>
    </tbody>
</table>

<td>ネストされた の には適用されません<table>。

無意味な!important回避策も削除したことに注意してください。style外部の CSS スタイルによってハードコーディングされたものをオーバーライドする場合にのみ使用することになっています。

また、この問題は特に JSF に関連するものではないことに注意してください。この質問のコンテキストでは、JSF は単なる HTML コード ジェネレーターです。「プレーン バニラ」HTML/CSS を扱う場合、まったく同じ問題が発生したはずです。問題は、基本的な HTML と CSS に慣れていないことです。http://htmldog.comでは、適切な HTML/CSS チュートリアルを見つけることができます。

于 2013-11-13T13:12:52.110 に答える