PrimeFaces Tabview - 调整标签的宽度

Question

我有一个Tabview是左导向的。

我想减少标签头的witdh，他们是太大。 我该怎么做？

<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%; 
} 

您必须确保您正确级联。