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