Make p:dialog scrollable when working with maximizable

Question

Does anyone know how to make a p: dialog work with maximizable and also scroll?

If the window is maximized with the scroll it gets bugged and scrollbar disappears.

I am using p:dialog from primefaces.

Answer 1

Well, I had to modify your answer slightly for it to work for me and I just want to share my findings in the hope of helping others.

I am not trying to steal the credit for your answer as I don't really deserve or want the credit for it and I just want to share my findings ...:)

Here it goes:

My Dialog uses the onShow attribute to call your function and passes the dialog widget var name to your function:

<p:dialog widgetVar="charts" width="860" height="540" header="chart}" maximizable="true" minimizable="true" showEffect="fade" onShow="fixPFDialogToggleMaximize('charts')">                 
   <ui:include src="/pages/charts.xhtml"/>
</p:dialog>

Your function then uses PF(widgetVar):

function fixPFDialogToggleMaximize(dlg) {
    if (undefined == PF(dlg).doToggleMaximize) {
        PF(dlg).doToggleMaximize = PF(dlg).toggleMaximize;
        PF(dlg).toggleMaximize = function () {
            this.doToggleMaximize();
            var marginsDiff = this.content.outerHeight() - this.content.height();
            var newHeight = this.jq.innerHeight() - this.titlebar.outerHeight() - marginsDiff;
            this.content.height(newHeight);
        };
    }
}

Thank you so much for providing your answer, as it helped me solve the same problem in my use of PF 5.2 Community edition.

Best Regards,

Joe

Answer 2

having the same problem, I tried to develope a workaround. This now fixes missing vertical scroll bar for me:

Define following function as a workaround for PF issue #4879:

function fixPFDialogToggleMaximize(dlg){
if(undefined == dlg.doToggleMaximize) {
    dlg.doToggleMaximize = dlg.toggleMaximize;
    dlg.toggleMaximize = function() {
        this.doToggleMaximize();

        var marginsDiff = this.content.outerHeight() - this.content.height();
        var newHeight = this.jq.innerHeight() - this.titlebar.outerHeight() - marginsDiff;
        this.content.height(newHeight);
    };
}

Declare the dialog you want to fix like this:

<p:dialog widgetVar="myDialog" maximizable="true" ...>
...
</p:dialog>
<script type="text/javascript">
    $(document).ready(
        function(){fixPFDialogToggleMaximize(myDialog);}
    );
</script>