2

Currently I'm developing a mobile application using phonegap, backbone.js & jquery mobile. It appeared to me that modal dialogs or popups are really painful. This is because every time you open the "keyboard" on a mobile device the popup or dialog keeps jumping around making the UX really a mess.

I found some solutions like Backbone.ModalDialog by Gareth Elms. But this is somehow unsatisfying because the "jumping problem" remains.

Is there an other solution than making a single page for every small form?

Nikel Weis
  • 724
  • 10
  • 27
  • can you add more details? when keyboard is active, popup opens by itself? – Omar Mar 18 '14 at 09:38
  • For example I want to make it possible for the user to add a new entity to the server - let's say a user with certain properties user name, prename, surname etc. These properties shall be entered in a popup form. But as soon as the user selects an input field the digital keyboard pops up from below (on the mobile device screen) and the entire positioning of the form is messed up. – Nikel Weis Mar 18 '14 at 09:58
  • 1
    you mean something like [this](http://stackoverflow.com/questions/20784356/jquery-mobile-popup-widget-doesnt-move-when-devices-android-keyboard-is-acti/20786836#20786836). This _reposition_ popup once keyboard is open. – Omar Mar 18 '14 at 10:00
  • 1
    Jep - made my day for the moment. Would you be so kind and make an answer out of it? :) – Nikel Weis Mar 18 '14 at 11:22

1 Answers1

1

Depending on how you first position the popup, either window or origin, you can reposition the popup at any stage after it's open.

To reposition it once keyboard is open, you need to listen to focus event and then _reposition it.

$(document).on("pagecreate", "#pageID", function () { /* pageinit for jQM 1.0 - 1.3 */
  $("#popupID input").on("focus", function () {
    $("#popupID").popup("reposition", {
      y: 0 /* reposition it to window's top */
    });
  }).on("blur", function () {
    $("#popupID").popup("reposition", {
      positionTo: "window" /* reposition it to window when keyboard is hidden */
    });
  });
});
Omar
  • 32,302
  • 9
  • 69
  • 112