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

使用PrimeFaces </tabview>时，如何在方向上减小<tabview>按钮的大小：“left”

1 个答案: