PrimeFaces TabView - Изменение ширины вкладок

Question

У меня есть табуляция, которая ориентирована влево.

Я хочу, чтобы уменьшить 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

Вы можете переопределить CSS, предоставленный PrimeFaces.

Хотя значения по умолчанию для вкладок составляют 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%; 
} 

Необходимо убедиться, что вы правильно каскадируете.