Make p:dialog scrollable when working with maximizable

Marcus M. picture Marcus M. · Jan 9, 2013 · Viewed 8.7k times · Source

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

Selaron picture Selaron · Mar 1, 2013

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>