how to make resposive dialog of primefaces

Question

I want make responsive modal, help me.

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

This is how it looks when I see it on a responsive screen

Non-responsive Modal

Answer 1

I solved it like this

First create the Dialog with a panel inside for the fields.

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

Then add the css rule for the 'modalResponsivo' class

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

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

This looks like a full screen Imagen 1

And that's how it looks a responsive screen Imagen 2