Change position p:dialog when I resize the page

Question

i'm a problem with ap:dialog.

Here the code:

        <p:dialog id="loginDialog" header="Login" width="400" widgetVar="dlg" visible="true"
            rendered="#{loginBean.f_loginRendered}" closable="false" showEffect="clip" draggable="false" resizable="false"
            style="box-shadow: 7px 10px 5px #303030; position:absolute;">
            <h:panelGrid id="panelGrid" columns="2" cellpadding="5" style="margin: 0 auto;">
                <h:outputLabel for="username" value="Username: *" />
                <p:inputText id="username" value="#{loginBean.f_username}" required="true" label="Username"/>
                <h:outputLabel for="password" value="Password: *" />
                <p:password id="password" value="#{loginBean.f_password}" required="true" label="Password"/>

<center>            <p:commandButton id="loginButton" value="Login" update="globalGrowl" actionListener="#{loginBean.checkDown}" /> </center>
        </h:panelGrid > 

        </p:dialog>

It's a simple login form. The problem is that when I resize the webpage, the dialog is fixed and it does not move by following the page, unlike the pictures.

How I can do it?

Answer 1

I would recommend to place it with css instead of jquery. The jquery resize event in this case, can lead to performance lags.

Answer 2

In case your web page is resizing only horizontally, you can do it using JavaScript by adding this code in h:body element of your page

<script type="text/javascript">
            window.onresize = function(event) {
                console.log("Screen is resized");
                var dialog = document.getElementById("loginDialog");
                var windowHeight=window.innerHeight;
                var windowWidth=window.innerWidth;
                console.log("Window W/H=" + windowWidth + "/" + windowHeight);
                //width of your dialog set in p:dialog 
                var dialogWidth=400;
                //position your dialog x px left from browser window left border
                dialog.style.left=((windowWidth-dialogWidth)/2)+"px"
            }
</script>

Beware that

• if your p:dialog is wrapped up by h:form element with id defined, you will need to change one line of script above like this

   var dialog = document.getElementById("yourFormId:loginDialog"); 

• if your web page is resizing vertically too, you will need to set/calculate p:dialog height and to apply additional line inside JavaScript function

   dialog.style.top = ((windowHeight-dialogHeight)/2)+"px"