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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -