CODEWITHSUNDEEP
jqueryhtmlcssjquery-uijquery-ui-dialog
UID
UID

Reputation: 4514

How to position the jQuery Dialog Box?

I have created this dialog box "http://jsfiddle.net/xSQr2/" which by default opens in center of the window.

But I want to open the dialog box right below the button which opens the dialog.

I found the code to do so, here the line of code I added to position my dialog to open right the button :

position: {
             my: "bottom",
             at: "bottom;",
             of: $('#addRxOrderButton')
         },

But when I added this code, the dialog opens on top of the Button. Here is the Fiddle with the Position added: http://jsfiddle.net/xSQr2/1/

Please suggest if I am doing something wrong!

Upvotes: 1

Views: 1795

Answers (2)

Quad
Quad

Reputation: 1718

    position: {
         my: "top",
         at: "bottom",
         of: $('#addRxOrderButton')
     }

this means position the dialog's(my) top at the bottom of button

edit : more docs here : http://api.jqueryui.com/position/

Upvotes: 3

Nico O
Nico O

Reputation: 14102

position worked correctly. You said the dialog bottom to be placed on the bottom of the button.

Use this instead:

position: {
 my: "top",
 at: "bottom",
 of: $('#addRxOrderButton')
}

http://jsfiddle.net/xSQr2/2/

Update:

To have the dialog exactly under the button, use this:

position: {
 my: "left top",
 at: "left bottom",
 of: $('#addRxOrderButton')
}

http://jsfiddle.net/xSQr2/4/

Upvotes: 1

Related Questions