Как исправить ширину и высоту диалогового окна primefaces

В моем веб-приложении я хочу установить высоту и ширину диалогового окна "Поверхности" таким образом, чтобы диалоговое окно отображалось точно в середине моей веб-страницы, и если вы хотите минимизировать окно, диалоговое окно также должно быть сведено к минимуму. Я имею в виду середину моего одного кадра, а не целого окна.

то есть. диалоговое окно с динамическим размером, например% ширина и высота

спасибо за любую помощь...

Ответы

Ответ 1

Вы можете использовать следующий код, чтобы сделать его фиксированным,

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

и сделать минимизацию функциональности. вы можете играть с javascript, чтобы сделать это.

См. также

Ответ 2

Попробуйте это, используйте стиль атрибута (или стиль):

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

Подробнее здесь.

Ответ 3

Если вы используете p-диалог, вам нужно использовать встроенный атрибут styleClass.

.my-style-class {
    width: 50%;
    height: 70%;
}
<p-dialog styleClass="my-style-class"><p-dialog>

Ответ 4

Я попытался исправить высоту с помощью JS, чтобы минимизировать диалог, но все же это не работает с большим контентом:

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