The jQuery UI dialog box is always top right

Question

I am trying to put a dialog to the right of the anchor tag, but no luck.

I checked the solutions in setting up the jQuery UI dialog and it doesn't seem to work.

function openDialog(row_index) { var target = $('#note'+row_index); $("#dialog_content_"+row_index).dialog({ width:150 }, { height:80 }).dialog('widget').position({ my: 'left', at: 'right', of: target }); } 

And this HTML

 <a id="note10" onclick="openDialog('10')" style="cursor:pointer">0010</a> <div style="display:none" title="Title 10" id="dialog_content_10">Row 10</div> 

Answer 1

Adding the top notation to the my and at attributes seems to work - if you want to align the top and to the right of the binding (tested in Chrome 11.0.6 and IE9):

 function openDialog(row_index) { var target = $('#note'+row_index); $("#dialog_content_"+row_index).dialog({ width:150 }, { height:80 }).dialog('widget').position({ my: 'left top', at: 'right top', of: target }); } 

Here is the jQuery page for testing different positions.

EDIT:

Here is a fiddle showing its alignment on the right ... maybe the problem is elsewhere in your CSS or html? Like the fiddle I tested with jQuery 1.5.1, jQuery UI 1.8.9 and the base theme CSS file.

Answer 2

OOpps - my brother used my computer and I presented the solution as him, not me

The way lazy men

 //get reference to the element var target = $('#note'+row_index); //add an empty span at the very end of the element [only once] if($('#note'+row_index+'_getPosition').length==0){ $(target).after('<span id="note'+row_index+'_getPosition"></span>') } // get position of newly inserted span var position = $('#note'+row_index+'_getPosition').position(); //finally call the dialog using position as below position : [position.left,position.top] 

Answer 3

The way lazy men

 //get reference to the element var target = $('#note'+row_index); //add an empty span at the very end of the element [only once] if($('#note'+row_index+'_getPosition').length==0){ $(target).after('<span id="note'+row_index+'_getPosition"></span>') } // get position of newly inserted span var position = $('#note'+row_index+'_getPosition').position(); //finally call the dialog using position as below position : [position.left,position.top]