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

【问题标题】：how to make resposive dialog of primefaces如何制作primefaces的响应式对话框
【发布时间】：2018-05-22 19:12:42
【问题描述】：

我想做响应式模态，帮帮我。 Quiero hacer un modal responsivo，赞成。

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

这是我在响应式屏幕上看到它时的样子 Así se ve cuando lo veo en una pantalla responsiva。 Modal no responsivo

【问题讨论】：

请用英文，或使用es.stackoverflow.com
我已经翻译了，虽然已经解决了，非常感谢

标签： jsf primefaces

【解决方案1】：

我是这样解决的 (Lo solucione así)

首先创建一个对话框，其中包含一个用于字段的面板。 (Primero crear el Dialogo con un panel adentro para los campos)

 <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 规则 (Después agrege la regla css para la clase 'modalResponsivo')

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

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

这看起来像全屏（作为完整版）Imagen 1

这就是响应式屏幕的外观 Y así se ve en pantalla resposiva: Imagen 2

【讨论】：

好吧，我不知道