Nested nested tabs and tabs unable to scroll through tabs
I am trying to use the mainfaces tab, if we use this tabView as a nested tabView, then we cannot scroll the tabs in the second tabView, for example if there are many tabs in the tabview that we cannot scroll in the second / third tabView.
Below is my code:
<p:tabView scrollable="true">
<p:tab title="Tab 1">
aaaaaaaaa
</p:tab>
<p:tab title="Tab 2">
<p:panel>
<p:tabView scrollable="true">
<p:tab title="Tab 1">Tab 1 Content</p:tab>
<p:tab title="Tab 2">
<p:panel>
<p:tabView scrollable="true">
<p:tab title="Tab 1">Tab 1 Content</p:tab>
<p:tab title="Tab 2">Tab 2 Content</p:tab>
<p:tab title="Tab 3">Tab 3 Content</p:tab>
<p:tab title="Tab 4">Tab 4 Content</p:tab>
.
.
.
<p:tab title="Tab 25">Tab 25 Content</p:tab>
</p:tabView>
</p:panel>
</p:tab>
<p:tab title="Tab 3">Tab 3 Content</p:tab>
<p:tab title="Tab 4">Tab 4 Content</p:tab>
<p:tab title="Tab 5">Tab 5 Content</p:tab>
.
.
.
<p:tab title="Tab 25">Tab 25 Content</p:tab>
</p:tabView>
</p:panel>
</p:tab>
<p:tab title="Tab 3">Tab 3 Content</p:tab>
<p:tab title="Tab 4">Tab 4 Content</p:tab>
.
.
.
<p:tab title="Tab 25">Tab 25 Content</p:tab>
</p:tabView>
+3
source to share
1 answer
Meanwhile, it looks like this has been fixed in version 5.3 of Primefaces (Oct 2015).
I can reproduce it with version 5.2.
Version 5.3 added scrolling controls if space is too small to show all tabs on initial render. Version 5.2 is not intended for nested TabViews unless they are initially visible.
Since version 6.2, the scrolling feature has an additional extension and activates / deactivates controls when the viewport is resized.
+1
source to share