CODEWITHSUNDEEP
jsf-2primefacesmodal-dialog
Diganta
Diganta

Reputation: 691

How <p:dialog>'s position remain center of a page after increasing its size dynamically?

In my application I have a <p:dialog>, in the dialog I placed a h:selectBooleanCheckbox . If this is checked then one row below this will apear otherwise this row will hidden.By default dialog's position is center of the page. Now Problem is when I checked this booleanCheckbox the height and width of dialog is increased as new row's content is greater than previous dialog , then the position doesn't remain center of the page, I mean the dialog's size increases bottom and right side. How I can display dialog at center after increasing its content? Any pointer will be very helpful to me . Thanks,

Sory for my bad English.

code of .xhtml is 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>

Upvotes: 2

Views: 10149

Answers (1)

&#214;mer Faruk Almalı
&#214;mer Faruk Almalı

Reputation: 3822

So when you click to the checkbox or check it call a function which re-renders your dialog so add this onstart="setSize();" to you p:ajax:

And below is the 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 you decide to change height or width values you should give the margin values as -1/2 times of them. The values that I gave are not certain you should chande them if it should be bigger or whatever.

If you want to detect unchecked checkbox and set height due to it's state our function can be sth. like 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 it doesn't checked; it can be checkBox.attr('checked')
    $(".ui-dialog").css ({
        "height": 150, //New height value which is starting dialog height when it's unchecked
        "margin-top": -75
        });
    }
}
}

You should give the correct clientID of your checkbox which you can see in your browser's developer options also maybe instead of this; height:auto; can work as well.

Upvotes: 3

Related Questions