Dojo dialog, the iPad and the virtual keyboard issue

Question

Recently, I have been working on a project where the interface should work for desktop and tablets (in particular the iPad).

One issue I am coming across is with a Dojo dialog on the iPad when text entry is taking place.

Basically here is what happens:

1. Load Dojo interface with buttons on iPad - OK
2. Press button (touch) to show dialog (90% height and width) - OK
3. Click on text box (touch) like DateTextBox or TimeTextBox - OK, the virtual keyboard is opened
4. Click the date or time I want in the UI (touch) - OK, but I can't see all of the options since it is longer than the screen size...
5. Try to scroll down (swipe up with two fingers or click 'next' in the keyboard) - not OK and the dialog repositions itself to have it's top at the top of the viewport area.

Basically, the issue is that the dialog keeps trying to reposition itself.

Am I able to stop dialog resizing and positioning if I catch the window onResize events?

Does anyone else have this issue with the iPad and Dojo dialogs?

Also, I found this StackOverflow topic on detecting the virtual keyboard, but it wasn't much help in this case...

http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari

Thanks!

Answer 1

I just came across the same issue yesterday and found a hack, which is not an elegant solution. If you want to stop the dijit.Dialog from repositioning you can:

1) Set the property ._relativePosition of a dijit.Dialog object (in this case it's "pop") after calling the method pop.show():

pop.show();
pop._relativePosition = new Object(); //create empty object

Next steps would probably be:

1. Check browser type&OS: dojo or even better BrowserDetect
2. Check when the virtual keyboard is activated and disable repositioning
3. Extend dijit.Dialog with custom class (handle all of the exceptions)