CODEWITHSUNDEEP
jquery-mobilepopup
user109187
user109187

Reputation: 5265

Unable to position popup in jquery mobile

I am using jQuery mobile. In my web page, I have created a div with data-role as header. Inside this, there is an image.
Now, I have created another div with data-role popup. When the page loads, the div with role popup is hidden as expected.
When the user clicks on the image, the popup is expected to be displayed.
It does. Problem is that it displays in a manner that overlaps with the header and immediately below the image which triggered the popup.

I am calling the popup method on the image selector by passing it the following options

$("#navBar").popup("open", {  
    x: 0,  
    y: 50,  
    transition: "reverse slide"  
});

This does not do the trick. Instead, the popup is displayed immediately below the image which triggered it. If X and Y options are removed, then the popup is displayed in the center of the window.

Some more information - Here is the code that jquery mobile has prepared: 

<div class="ui-popup-container reverse slide in ui-popup-active" id="navBar-popup" style="max-width: 1271px; top: 30px; left: 15px;" tabindex="0">

Here it can be seen that jQuery Mobile has added the styling top=30px and left=15px.
To fulfill my needs, I want that top=40px and left=0px. I want to do this without overriding the base CSS. I was hoping that the X and Y options passed to the popup() method would do the trick but they are not working!
An Image of the issue to help in understanding.

Upvotes: 1

Views: 3882

Answers (1)

THX-1138
THX-1138

Reputation: 21750

popup by default tries to position directly on top of the element that opened it, in case you do it using API and specify x and y, it will try to center popup at given coordinates. But to avoid popup showing off screen jquery mobile also enforces a padding between popup dialog and the edge of the screen, and by default those padding margins are 30 vertical and 15 horizontal. So the reason your pup is positioned as it is is due to those tolerances.

To position popup to exact x and y you want, you will need to add half of popup's width to the desired x, and half of popup's height to desired y.

Upvotes: 2

Related Questions