Primefaces选项卡视图不包括所有选项卡

Question

我有一个primefaces标签视图，左侧有可变数量的动态标签。每个选项卡可能包含使选项卡的高度不同的元素。

当选项卡数量大且所选选项卡的内容短时，选项卡标题超出了选项卡视图的范围。整个页面无法滚动以访问下部选项卡。因此，在这种情况下，无法选择位于页面底部下方的底部选项卡。

有什么方法可以使tabview包围所有标签吗？

                        <p:tabView orientation="left" style="width: 100%; padding: 5px;" value="#{clientEncounterComponentFormController.findClientEncounterComponentFormOfAFormset(clientEncounterComponentFormSetController.selected)}" var="f">
                            <p:tab title="#{f.name}" >
                                <div style="#{f.generatedCss}" >
                                    <ez:clinicForms form="#{f}" ></ez:clinicForms>
                                </div>
                            </p:tab>
                        </p:tabView>

Answer 1

我看不到您的代码，因此我很难正确回答您。

1）TabView组件不适用于长文本的大内容，我想向您推荐SelectOneMenu或MultiSelectListbox，这对于使用很多选项确实更好。

2）另外，您还可以通过CSS动态更改标签的大小，并可以通过以下条件设置样式：

<p:tabview value="#{yourBean.listOfObjects}" style="height: 5vw;" rendered="yourBean.isThereBigContent()">
</p:tabview>

<p:tabview value="#{yourBean.listOfObjects}" style="height: 10vw;" rendered="!yourBean.isThereBigContent()">
</p:tabview>

Bean：

public boolean isThereBigContent() {
  return this.listOfObjects.size() > 8;

}