如何制作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