Come posizionare una finestra di dialogo in Prime Faces dopo il suo ridimensionamento

Question

Ho una Prime Faces p:dialog che è stata ridimensionata mentre i nuovi componenti sono stati inseriti all'apertura (stato 'show'). Tuttavia, la sua posizione non cambia e la sua dimensione aumenta dall'angolo in basso a sinistra fino alla parte inferiore della pagina.

Ho bisogno di riposizionarlo ogni volta che eseguo il rendering di nuovi componenti dinamicamente. C'è una funzione JavaScript che posso chiamare per riposizionare il suo widget?

Sto utilizzando PrimeFaces 3.5 con Mojarra 2.1.13.

Answer 1

questo è un metodo che dovrebbe funzionare nel vostro caso:

Bean Codice:

@ManagedBean 
@ViewScoped 
public class Bean 
{ 
    private boolean visible; 

    public void setVisible(boolean visible) 
    { 
     this.visible = visible; 
    } 

    public boolean getVisible() 
    { 
     return this.visible; 
    } 

    public void onBeforeShowDialog(AjaxBehaviorEvent event) 
    { 
     visible = true; 
    } 

    public void onBeforeHideDialog(AjaxBehaviorEvent event) 
    { 
     visible = false; 
    } 
} 

Vista Codice:

<h:commandButton value="Show dialog"> 
    <f:ajax listener="#{bean.onBeforeShowDialog}" render="dialog" /> 
</h:commandButton> 

<p:dialog id="dialog" visible="#{bean.visible}"> 
    content 

    <h:commandButton value="Hide dialog"> 
     <f:ajax listener="#{bean.onBeforeHideDialog}" render="dialog" /> 
    </h:commandButton> 
</p:dialog> 

Un secondo metodo dovrebbe anche funzionare è di JavaScript:

Per aggiungere in <h:head />:

<h:outputScript library="primefaces" name="jquery/jquery.js" /> 

<script> 
    function centerAndShowDialog(dialog) 
    { 
     $(dialog).css("top",Math.max(0,(($(window).height() - $(dialog).outerHeight())/2) + $(window).scrollTop()) + "px"); 
     $(dialog).css("left",Math.max(0, (($(window).width() - $(dialog).outerWidth())/2) + $(window).scrollLeft()) + "px"); 
     dialog.show(); 
    } 
</script> 

Vista Codice:

<p:commandButton id="basic" value="Show Dialog" onclick="centerAndShowDialog(dlg);" type="button" /> 

<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg" dynamic="true"> 
    Content 
</p:dialog> 

Nota: Dal momento che non sto usando primefaces, non ho provato questo codice in modo spero che funziona bene, ma la l'idea è qui!

Answer 2

Ho avuto una situazione simile con un TabView all'interno di una finestra di dialogo. Il contenuto di TabView è stato caricato in modo dinamico.

<p:dialog widgetVar="dialogWidgetVar"> 
    <p:tabView value="#{tabBean.tabs}" var="tabsVar" 
      onTabShow="PF('dialogWidgetVar').initPosition();" dynamic="true"> 
     <p:tab id="Tab#{tabsVar.id}" title="#{tabsVar.name}"> 
      ... 
     </p:tab> 
    </p:tabView> 
</p:dialog> 

Come si può vedere chiamerà la funzione initPosition() con ogni modifica di una scheda. Questa funzione riposizionerà la tua finestra di dialogo. È possibile utilizzare questa funzione in diversi casi.

1. http://forum.primefaces.org/viewtopic.php?f=3&t=16893