how to fix width and height of primefaces dialogbox

问题

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

回答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

回答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.

回答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>

回答4:

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');">

来源：https://stackoverflow.com/questions/5580443/how-to-fix-width-and-height-of-primefaces-dialogbox

标签

jsf

primefaces

dialog