时间戳

首页 > 解决方案 > Primefaces tabview 不包括所有选项卡

primefaces - Primefaces tabview 不包括所有选项卡

问题描述

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

When the number of tabs is large, and the content of the selected tab is short, the tab titles are beyond the confines of the tabview. 无法滚动整个页面以访问较低的选项卡。因此，在这种情况下，无法选择页面底部下方的底部选项卡。

有什么方法可以让 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>

底部标签在标签视图之外

标签： primefaces

解决方案

我没有看到你的代码，所以我很难正确回答你。

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>

豆：

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

}

推荐阅读