Dynamic popup positioning bug

[RomaDotDev]

Hi!

I created one popup div and binded tap event on each menu item click so I alter popup, change it's content and redraw it using .trigger( 'updatelayout' );

http://m.moldaviancuisine.com/testMenu.html

The popup opens in the right part of the viewport in desktop browsers (looks it floats right) and completely disappears in Android browser. When I open the same popup the second time it displays normal.

Also close 'Close' doesn't redraw after I add it programmically.

Tested in
Mobile: HTC Desire HD CM7.2 Android 2.3.4 browser
Desktop: Ubuntu 12.04 FF 15, Chrome 21

A good dynamic popup example in docs would be perfect!

Thank you for a great work!

[robschmuecker]

Hi,

Your problem is simply solved by adding a fixed width to your img tag in the dynamic pop-up.
Currently your code does not have that and hence the pop-up doesn't know how wide the image is before it loads it.
This below CSS rule fixes it. You can change the width to whatever you want.

#popupPicture img {
    width: 500px;
}

Hope that helps.

@uGoMobi this can be closed.
I have also made a PR on master branch #5105

R.

[robschmuecker]

Sorry I was a little premature there - I wanted to say I added a PR with amendments to the Docs to show some examples for dynamic dialog/popups.

@irsick You can see these by looking at these 2 files in my repo.

Dialogs
Popups

R.

[toddparker]

Thanks @robschmuecker - I can see these are being very useful additions to the demos.

[jaspermdegroot]

@irsick @robschmuecker

You don't need to set a fixed width to solve this. The only problem is this part:

$( "#popupPicture" ).bind({
    popupafteropen: function(event, ui) {
        $.mobile.loading( 'hide' );
    },
    popupbeforeposition: function() {
        var maxWidth = $( window ).width() - 60 + "px";
        $( "#popupPicture img" ).css( "max-width", maxWidth );
    }
});

Change bind into on and it will work.

However, you don't need to set a max-width at all, because the widget contains CSS for this and a tolerance functionality. Only thing you have to look into is max-height. See http://jquerymobile.com/test/docs/pages/popup/popup-images.html

We will demonstrate how to handle the enhancement of the header and close button in an example in the docs.

@robschmuecker - Thanks for the PR! Let's discuss on IRC.

[jaspermdegroot]

@irsick

I tested the solution that I posted in my previous comment and that doesn't completely solve it. Sometimes the position is still off. It seems to happen quite random and I haven't figured out the cause yet.

Update: Actually not that random... it happens when the image has not completely loaded yet. Didn't notice it first because I forgot to test without caching.

[RomaDotDev]

It works for me the same way but in my case first list elements work also without problem.

Is there any way to control the queue of script actions i.e. make JQM popup plugin wait until image would be completely loaded?

[jaspermdegroot]

@irsick

You can use .load() but it has some caveats. See http://api.jquery.com/load-event/
We are looking into best way to do this and will add an example to the docs.

[jaspermdegroot]

@irsick

Like I said we will add a demo to the docs to show how this could be done, but we have to look at the caveats of the load event first.
I added a link to this ticket here #4389. Closing this issue because it is not a bug in the framework.