Skip to content
This repository

Dynamic popup positioning bug #5101

Closed
irsick opened this Issue September 27, 2012 · 8 comments

4 participants

irsick Jasper de Groot Rob Schmuecker Todd Parker
irsick

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!

Rob Schmuecker

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.

Rob Schmuecker

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.

Todd Parker

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

Jasper de Groot
Owner

@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.

Jasper de Groot
Owner

@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.

irsick

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?

Jasper de Groot
Owner

@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.

Jasper de Groot
Owner

@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.

Jasper de Groot uGoMobi closed this October 26, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.