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
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.
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
return "top:100px !important;left:100px !important;"
Enjoy your mobile application