4

I am trying to position dialog on the right of the anchor tag, but with no luck.

I checked the solutions at jQuery UI dialog positioning and neither seems 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>
Community
  • 1
  • 1
Pentium10
  • 204,586
  • 122
  • 423
  • 502

3 Answers3

2

Adding the top designation to the my and at attributes seems to work - assuming you meant to align to the top and to the right of the anchor (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 the different positions.

EDIT:

Here is a fiddle showing it aligning on the right... maybe the issue is somewhere else in your CSS or html? As in the fiddle I've been testing using jQuery 1.5.1, jQuery UI 1.8.9 and the base theme CSS file.

WSkid
  • 2,736
  • 2
  • 22
  • 26
  • Added fiddle with an example... perhaps there is surrounding code or CSS that is throwing it off? – WSkid Mar 03 '11 at 22:14
  • Dialog position may depend on the viewport size. If it doesn't fit the space untill right border, it will be repositioned. Try to add "collision" attribute. After I added collision: "none" to the above mentioned fiddle, it seems works fine - see [modified fiddle](http://jsfiddle.net/twKWk/4/) (Test it by resizing the Result panel). – ischenkodv Mar 03 '11 at 22:31
1

OOpps - my brother was using my PC and I submitted the solution as him rather than myself

The lazy mans way

//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]
Nigel Francois
  • 11
  • 1
0

The lazy mans way

//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]
Kurt Francois
  • 1