button - 如何减小尺寸方向为“左”时的按钮，使用 PrimeFaces

Question

<p:tabView orientation="left" dynamic="false" cache="false" style="font-size: 70% !important; **wight:300px**; border: none;">
    <p:tab title="mainBoard" id="mainboard" style="font-size: 70% !important; width:200px">
        <p:scrollPanel style="width:800px;height: 600px;border: none;"  mode="native">
            <ui:include src="/mainboard.xhtml" />
        </p:scrollPanel>
    </p:tab>

    <p:tab title="secBoard" id="secboard" style="font-size: 70% !important; width:200px">
        <p:scrollPanel style="width:800px;height: 600px;border: none;"  mode="native">
            <ui:include src="/secboard.xhtml" />
        </p:scrollPanel>
    </p:tab>
</p:tabView>

* * wight:300px 来自 tabview * * 也来自 - 它不起作用。

Answer 1

您可能需要包含一个单独的 CSS 文件并设置.ui-tabs-left > .ui-tabs-nav宽度。我用各种大小测试了下面的代码，它似乎工作。

.ui-tabs-left > .ui-tabs-nav {
    width:300px !important;
    }

您可能会遇到将内容面板强制置于选项卡下方的问题。我使用以下代码来防止在我不久前创建的项目中发生这种情况。

.ui-tabs-left > .ui-tabs-panels {
    height:100% !important;
    float:right !important;
    width:89% !important;
    }

.ui-tabs-left > .ui-tabs-nav {
    float:left !important;
    width:10% !important;
    height:100% !important;
    }