Sposób pozycjonowania okna dialogowego p: w Prime Faces po zmianie rozmiaru

Question

Mam Prime Faces p:dialog, który został zmieniony, gdy nowe komponenty zostaną wstawione po otwarciu (stan "show"). Jednak jego pozycja nie zmienia się i jego rozmiar rośnie od lewego dolnego rogu do dolnej strony.

Muszę zmienić położenie za każdym razem, gdy dynamicznie renderuję nowe komponenty. Czy istnieje jakaś funkcja JavaScript, którą mogę wywołać w swoim widżecie, aby zmienić jej pozycję?

Używam PrimeFaces 3.5 z Mojarra 2.1.13.

Answer 1

Jest to metoda, która powinna działać w Twoim przypadku:

Bean kod:

@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; 
    } 
} 

Zobacz Kod:

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

Druga metoda powinna również pracować jest przez JavaScript:

Aby dodać <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> 

Zobacz kod:

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

Uwaga: Ponieważ nie używam PrimeFaces, nie Przetestowałem ten kod, więc mam nadzieję, że działa dobrze, ale pomysł jest tutaj!

Answer 2

Miałem podobną sytuację z TabView wewnątrz okna dialogowego. Zawartość TabView została załadowana dynamicznie.

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

Jak widać wywoła funkcję initPosition() z każdą zmianą Tab. Ta funkcja zmieni położenie twojego okna dialogowego. Możesz użyć tej funkcji w kilku przypadkach.

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