Primefaces dialog scrollbar not showing up below the header

Question

I am using the following primefaces dialog and I added scrolling after a max height using the style attribute below.

However, the scrollbar is not showing up within the header and as a result, when I scroll, the header scrolls along with the contents of the dialog.

<p:dialog header="#{resName}" widgetVar="resDialog" resizable="false" style="max-height:900px;overflow:auto">

I don't want the header to scroll and preferably, I also want the scrollbar to show under the header

Any ideas?

Solution 1

Get rid of your overflow:auto; and put every content from your dialog inside a p:scrollPanel (check here).

Solution 2

Another very simple alternative could be the use of the positionType property of the dialog.

<p:dialog header="#{resName}" widgetVar="resDialog" resizable="false" positionType="absolute">

Solution 3

I find it easier to do like this:

.ui-dialog-content{ 
    max-width: 950px !important; 
    max-height: 700px !important;
    margin-bottom: 5px !important;
}

That should target all dialogs at once.

To open the dialog and scroll to the top of it (if it has been open before) do

<p:commandButton .... 
   oncomplete="PF('dialogwv').show(); PF('dialogwv').content.scrollTop('0')" />

Note: the two PF-calls cannot be switched around, but in praxis it does'nt matter..

Comments

[user3737958]

Thanks, I had to put the contents of my dialog around the following to make it work: <p:scrollPanel mode="native" style="max-height:700px">

[user3737958]

I also had to keep my header(for which I used th f:facet tag) outside of the p:scrollPanel; otherwise, my header would not display properly

[oggiemc]

Just what I needed. Many thanks :)

[Jaqen H'ghar]

@oggiemc I think you can put the last part in onShow() on dialog if you prefer