如何制作primefaces的响应式对话框

Question

我想制作响应式模式，请帮助我。

<p:dialog id="idModal" widgetVar="modalWV" modal="true" width="600" header="Titulo Modal">

   <h:panelGrid id="panelPermisoGuardar" columns="2" cellpadding="10" width="100%"
      //campos
   </p:panelGrid>
</p:dialog>

这就是我在响应式屏幕上看到它时的样子

无响应模态

Answer 1

我是这样解决的

首先创建对话框，其中包含一个用于字段的面板。

 <p:dialog id="modal" widgetVar="modalWV" modal="true" styleClass="modalResponsivo" header="Titulo Modal">

   <h:panelGrid id="idPanel" columns="2" width="100%" columnClasses="ui-g-12 ui-md-2,ui-g-12 ui-md-10" layout="grid">

   </h:panelGrid>

</p:dialog>

然后为 'modalResponsivo' 类添加 css 规则

@media screen and (max-width: 768px ) {
  .modalResponsivo { width: 90% !important;} }

@media screen and (min-width: 1024px ) {
  .modalResponsivo { width: 30% !important; }
}

这看起来像全屏 Imagen 1

这就是响应式屏幕的样子 Imagen 2

Answer 2

您还可以在对话框属性中使用 %

<p:dialog id="gmapDialog" widgetVar="dlg" width="90%" height="500" fitViewport="true" modal="true">
    <p:autoUpdate/>
    <p:ajax event="close" update="gmapDialog"/>
    <embed  class="w-full h-full" src="#{lightBoxBean.url}"/>
</p:dialog>