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
