CODEWITHSUNDEEP
jsfprimefacesdialog
Annu
Annu

Reputation: 562

How to fix width and height of a p:dialog

In my web application i want to fix height and width of a PrimeFaces p:dialog in the way in which the dialog appears exactly in the middle of my web page, and if one want to minimize the window then the dialog should also be minimized.

I mean middle of my one of the frame not whole window. For example dynamic sized dialog like % width and height.

Upvotes: 16

Views: 72102

Answers (4)

nanoTitan
nanoTitan

Reputation: 690

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>

Upvotes: 1

M&#225;ťa - Stitod.cz
M&#225;ťa - Stitod.cz

Reputation: 893

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.

Upvotes: 1

Jigar Joshi
Jigar Joshi

Reputation: 240948

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

Upvotes: 23

Saipavan ure
Saipavan ure

Reputation: 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.

Upvotes: 0

Related Questions