Popup doesn't take into account positionTo on resize?

[DzenisevichK]

When I use positionTo="origin" or positionTo="#selectors..." I expect that after window resize popup will adjust position according to positionTo option.

Test case:

• Open http://jquerymobile.com/test/docs/pages/popup/index.html
• Click at "Position to origin" or "Position to #codeSample" -> After this popup has correct position
• Resize browser window -> Popup will re-position related to window -> Not as I expect based on positionTo option.

Reproduced on Windows 7 SP1 x64 + Chrome (21.0.1180.83 m)

[DzenisevichK]

The same related also to x and y options of open method...

[jaspermdegroot]

@DzenisevichK

By design popups are always positioned to the window. The main reasons are prevent jumping and ensure the popup is not out of view after resize / orientation change.

[DzenisevichK]

@uGoMobi

Thanks for clarifying... May be jqm should have this notes in code or document?

prevent jumping

But it's not prevented because jump exist from positionTo="origin" to "window"...

And also I am not sure that this is correct to allow a user to pass calculated x, y (and may be positionTo) but ignore (no give chance to recalculate) them on resize...

What about my case: I want to position error popup (like a tooltip) to fixed header? I think this should be possible without jumping and out of view or?

[jaspermdegroot]

@DzenisevichK

I understand your point and actually I am also very much in favor using the positionTo after resize as well.
Although it might look like a simple change it does take a lot more to make this work properly on all supported platforms.
We can look into this after 1.2. For now I am closing this as a feature request and will add a link to this ticket on the feature request wiki page.

[pupvogel]

Any chance this will be fixed in one of the next releases ??

I have issues with this especially on input fields, where phones bring up their softkeyboards - so a resize is fired.
The popup immediately jumps to the middle of the window and often leaves me with no visible form fields, and/or the keyboard gone while the form field is still in focus.

Dialogs were not so much an option, so I helped myself so far by doing this:

$.mobile.window.resize(function(e){
if(popup_is_open) e.stopImmediatePropagation();})

...far from ideal, but surprisingly the popup seems to stay where it was...

[gabrielschulhof]

@DzenisevichK and @pupvogel

I've modified the popup's "popupbeforeposition" event. It now passes along a structure that contains the positioning data it will use upon repositioning. So, basically the same stuff you would pass to open (x, y, positionTo). You can modify this structure to get the effect you want:

$( "#myPopup" ).on( "popupbeforeposition", function( e, data ) {
  delete data.x;
  delete data.y;
  data.positionTo = "#myLink";
});

Note that a value of "origin" will not work as the value for data.positionTo, because the information about the origin (that is, the link associated with the popup) has been lost by the time popupbeforeposition rolls around. But, if you tag your link with an ID, you can pass it into positionTo, and it will be used to centre the popup over the element selected by it.

[pupvogel]

@gabrielschulhof
Hmm, looks like this doesn't work all the time - eventually my popup with input fields will always end up in the middle of the window, even though I created an eventhandler just like that.

But I'm beginning to think that input fields in popups on an Android 2.3.4 phone just may not be a good idea for now...all kinds of things happen when user inputs text: resizes, url bar coming down and going up and what not.
Really hard to figure out what is happening exactly.