Page 1 of 1

p:scrollPanel inside p:tabView

Posted: 02 Apr 2012, 12:27
by gianluca.elmo
Hallo,

is there a particular reason why I cannot get a scrollPanel work in the second, third, etc tab of a p:tabView, which is inside a p:dialog ?

<p:dialog modal="true" widgetVar="dlg">
<p:tabView ...>
<p:tab title="tab1">
<p:scrollPanel style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
<p:tab title="tab2">
<p:scrollPanel style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
<p:tab title="tab3">
<p:scrollPanel style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
</p:tabView>
</p:dialog>

I can get the vertical scroll bar only for the first tab.

The reason why I am trying that is because I want the tabs to remain visible while scrolling down.

Moreover, is there a way to reset the vertical scrollbar so that is starts always at the top?

Many thanks
Luca

Re: p:scrollPanel inside p:tabView

Posted: 19 Apr 2012, 09:45
by gianluca.elmo
Hallo,

for the time being I have solved my problem by specifying the mode as native for all scroll panels.

<p:dialog modal="true" widgetVar="dlg">
<p:tabView ...>
<p:tab title="tab1">
<p:scrollPanel mode="native" style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
<p:tab title="tab2">
<p:scrollPanel mode="native" style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
<p:tab title="tab3">
<p:scrollPanel mode="native" style="height: 530px; width: 860px;">
<ui:include src="./../pub/sections/file1.xhtml" />
</p:scrollPanel>
</p:tab>
</p:tabView>
</p:dialog>

It allows me to show a scroll panel each tab and to reset the vertical scrollbar everytime the user selects one of the tabs.

I have seen that PrimeFaces scroll panel sets some css properties dynamically but I was not able to understand whether it is possible to use some js functions to override that behaviour.

Regards
Luca

Re: p:scrollPanel inside p:tabView

Posted: 22 Jun 2012, 22:47
by Gatech
Native sucks :(

Isn't there still any other solution?

Re: p:scrollPanel inside p:tabView

Posted: 22 Jun 2012, 23:37
by cagatay.civici
Non-native ScrollPanel is experimental right now, once it becomes stable we'll apply it to any container that overflows like scrollable table, scrolling selectOneMenu and so on.

Re: p:scrollPanel inside p:tabView

Posted: 17 Sep 2013, 15:20
by ajeh
optimus.prime wrote:Non-native ScrollPanel is experimental right now, once it becomes stable we'll apply it to any container that overflows like scrollable table, scrolling selectOneMenu and so on.
Could you possibly mention that as a 'known issue' in your demo or manual to save the users from wasting hours trying to get it to work?
There are a couple of inches of space at the end of scrollPanel section in the manual on p.360 where this little notice would fit perfectly.