1

Primefaces TabView コンポーネントのタブ内のパディングを削除するために、css ファイルに新しいスタイルを作成しました。

.tabviewleft .ui-tabs .ui-tabs-panel {
    padding: 0px 0px;
}

次に、この新しいスタイルをタブに適用しようとしました。しかし、うまくいきませんでした：

<p:tab id="fieldCategoryTab" title="category" styleClass="tabviewleft" >

次に、TabView コンポーネントに適用してみました。しかし、それもうまくいきませんでした:

<p:tabView id="tabViewLeft" styleClass="tabviewleft">

次に、TabView の外に div を作成しましたが、うまくいきました。

<div id="teste" class="tabviewleft">

スタイルを適用するために TabView の外に div を作成する必要があるのはなぜですか?

div を作成せずに Tab または TabView に直接適用することは可能ですか?

事前にご説明いただきありがとうございます。

4

1 に答える 1

0

はい、可能です。<p:tabView>の構造が次のようになっているとします。

<p:tabView id="tabView" styleClass="tabView" dynamic="true" 
    cache="false"> 

    <p:tab title="#{trhBundle['paidLeave']}" id="paid">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['RTT']}" id="rtt">
       <h:form>
       </h:form>
    </p:tab>

    <p:tab title="#{trhBundle['specialLeave']}" id="special">
       <h:form>
       </h:form>
    </p:tab>
</p:tabView>

次にcssを追加します

.tabView .ui-tabs-panel {
padding: 0px!important;
}

これにより、のすべてのパディングが削除されると思います<p:tab>。

于 2013-10-28T03:18:16.923 に答える