CODEWITHSUNDEEP
cssjsfjakarta-eeprimefacestabview
yetAnotherSE
yetAnotherSE

Reputation: 3258

PrimeFaces Tabview - Resize width of tabs

I have a Tabview that is left oriented.

enter image description here

I want to decrease the witdh of tabs headers, they are too large. How can I do that?

<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>

Upvotes: 1

Views: 10433

Answers (1)

Hatem Alimam
Hatem Alimam

Reputation: 10048

You could override the CSS provided by PrimeFaces.

While the default values of the tabs are 25% and the panels are 75% of width, you can adjust the tabs header into 10% and the panels of the tabs to 90% which all together would build up a 100%.

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

You have to make sure that you are cascading correctly.

Upvotes: 5

Related Questions