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

您必须确保级联正确。