PrimeFaces选项卡视图-调整选项卡宽度

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

您必须确保正确级联。