how to fix width and height of primefaces dialogbox

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

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 2

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 3

If you are using p-dialog, then you will want to use the built-in styleClass attribute.

.my-style-class {
    width: 50%;
    height: 70%;
}

<p-dialog styleClass="my-style-class"><p-dialog>