jsf 2 - How <p:dialog>'s position remain center of a page after increasing its size dynamically? -
in application have <p:dialog>
, in dialog placed h:selectbooleancheckbox
. if checked 1 row below apear otherwise row hidden.by default dialog's position center of page. problem when checked booleancheckbox
height , width of dialog increased new row's content greater previous dialog
, position doesn't remain center of page, mean dialog's size increases bottom , right side. how can display dialog @ center after increasing content? pointer helpful me . thanks,
sory bad english.
code of .xhtml given below:
<p:dialog id="popup" widgetvar="popupwidget" showeffect="fade" hideeffect="explode" resizable="false" modal="true"> <p:row> <h:outputlabel value="#{adbbundle['addremoveactivitymanagers']}" /> <h:selectbooleancheckbox value="#{activitylistcontroller.editactivitymanager}" immediate="true"> <p:ajax event="click" update="adminpanel" listener="#{activitylistcontroller.updateactivitymanager}"/> </h:selectbooleancheckbox> </p:row> <p:row rendered="#{activitylistcontroller.editactivitymanager}"> <p:column> <p:datatable id="sourcemanagerdatatable" value="#{activitylistcontroller.activitysourceusers}" var="manager" livescroll="true" scrollrows="5" scrollheight="125" selection="#{activitylistcontroller.selectedactivitysourceusers}" selectionmode="multiple" filteredvalue="#{activitylistcontroller.filteredsourceusers}" scrollable="true" styleclass="activitymanager"> <f:facet name="header"> <h:outputtext value="available managers" /> </f:facet> <p:column headertext="full name" sortby="#{manager.lastname}" filterby="#{manager.fullname}" filtermatchmode="contains"> <h:outputtext value="#{manager.lastname}, #{manager.firstname}" /> </p:column> </p:datatable> </p:column> </p:row></p:dialog>
so when click checkbox or check call function re-renders dialog add onstart="setsize();"
p:ajax
:
and below javascript function:
function setsize () { $(".ui-dialog").css ({ "width": 300, "height": 200, "left": "50%", "top": "50%", "margin-left": -150, "margin-top": -100 }); }
don't forget if decide change height
or width
values should give margin values -1/2 times of them. values gave not should chande them if should bigger or whatever.
if want detect unchecked checkbox , set height due it's state our function can sth. that:
function setsize () { var checkbox = $(document.getelementbyid('mycheckbox')); $('.ui-dialog').css ({ 'width' : 300, 'height': 200, 'left': "50%", 'top': "50%", 'margin-left': -150, 'margin-top': -100 }); if(!checkbox.checked) {//if doesn't checked; can checkbox.attr('checked') $(".ui-dialog").css ({ "height": 150, //new height value starting dialog height when it's unchecked "margin-top": -75 }); } } }
you should give correct clientid of checkbox can see in browser's developer options maybe instead of this; height:auto;
can work well.
Comments
Post a Comment