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?

Answer 1

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

Answer 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">

Answer 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..