how to fix width and height of primefaces dialogbo

Question

In my web application i want to fix height and width of primefaces dialogbox in the way in which the dialogbox appears exactly in the middle of my web page, and if one want to minimize the window then the dialogbox should also be minimised. i mean middle of my one of the frame not whole window.

i.e. dynamic sized dialog box like % width and height

thanks for any help...

Answer 1

Try this, use a attribute style (or styleclass):

<p:dialog ... modal="true" style="width:50% !important; height:40% !important; top:25% !important; left: 30% !important;">
  <!-- any components -->
</p:dialog>

See more here.

Answer 2

You can use following code to make it of fixed dimension,

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" width="300" height="200">  
    <h:outputText value="This is a Modal Dialog." />  
</p:dialog>    

and to make minimize functionality. you can play with javascript to get it done.

See Also

• Primefaces Show case

Answer 3

I tried to fix the height with JS to minimize the dialog, but still this doesn't work with large content:

<p:dialog widgetVar="dlg"
          header="header"
          modal="true"
          width="600"
          max-height="500"
          resizable="false"
          closeOnEscape="true"
          appendToBody="false"
          showEffect="clip"
          hideEffect="explode"
          onShow="PF('dlg').initPosition(); PF('dlg').getJQ().css('max-height', '500px');">