CODEWITHSUNDEEP
javascriptjqueryhtmldialog
Pentium10
Pentium10

Reputation: 207838

jQuery UI dialog positioning always on top right

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>

Upvotes: 4

Views: 6803

Answers (3)

Nigel Francois
Nigel Francois

Reputation: 11

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]

Upvotes: 1

Kurt Francois
Kurt Francois

Reputation: 1

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]

Upvotes: 0

WSkid
WSkid

Reputation: 2786

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.

Upvotes: 2

Related Questions