PrimeFaces Tabview-調整選項卡的寬度

Question

我有一個向左的Tabview。

我想減少選項卡標題的威力，它們太大。 我怎樣才能做到這一點？

<p:tabView orientation="left">
    <div style="width: 5%">
        <p:tab  title="Tab1">
        </p:tab>
        <p:tab title="Tab2">
            <p:dataTable id="dg_Diger"
                value="#{aboneGoruntulemeProvider.digerModel}" var="diger"
                style="margin-bottom:20px">
                <p:column headerText="Kart No">
                  <h:outputText value="#{diger.kartNo}" />
                </p:column>
                <p:column headerText="Alt Limit">
                  <h:outputText value="#{diger.altLimit}" />
                </p:column>
                <p:column headerText="Veriliş Tarihi">
                  <h:outputText value="#{diger.verilisTarihi}" />
                </p:column>
                <p:column headerText="Bitiş Tarihi">
                  <h:outputText value="#{diger.bitisTarihi}" />
                </p:column>
                <p:column headerText="Durum">
                  <h:outputText value="#{diger.durum}" />
                </p:column>
            </p:dataTable>
        </p:tab>
    </div>
</p:tabView>

Answer 1

您可以覆蓋PrimeFaces提供的CSS。

選項卡的默認值是25％，面板的寬度是75％，但您可以將選項卡頁眉調整為10％，將選項卡的面板調整為90％，這三者的總和為100％。

/** tabs **/
.ui-tabs.ui-tabs-left > .ui-tabs-nav {
   width: 10%;
}
/** panels **/
.ui-tabs.ui-tabs-left > .ui-tabs-panels {
   width: 90%;
}

您必須確保正確級聯。