Preventing the XPages Dialog control to auto center

If you ever tried to use a XPage dialog control from the extension library on a mobile device. You’ll probably seen this behavior, the dialog is moving away each time you try to click on a button or a field in the dialog.

The trick to fix this is to force the dialog to a fixed location if you are on a mobile device with a small screen.

There are several ways to detect this:

check out this stackoverflow question how to detect iphone by CSS –>Link

You can use this xSnippet –> Link or this post by Keith Strickland –> Link

When you can detect this and depending on your approach place the following code in a stylesheet

or if you place it directly as a computed style on the dialog.

The following css properties is that makes the dialog to stop moving around. 

top:100px !important;
left:100px !important;

This will force the dialog to be placed at position 100,100 on screen. !important is a css property that forces an override of other properties set.

So what I usually do to fix this is add the xSnippet in a SSJS Scriptlibrary and add the following code as a computed style property on the dialog 

if(isIphone()||isAndroidCheck()){
return "top:100px !important;left:100px !important;"
}

Enjoy your mobile application 

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>