1

I want to set the absolute position (x and y) of a jQuery UI (1.12.1) dialog. By all accounts I should be able to do that like so (although the jQuery docs inexplicably do not mention this syntax, neither here nor here):

$('#element').dialog('option', 'position', [x, y]);

Examples of people successfully using this syntax are in:

Yet, when I do attempt this, nothing happens. Consider the following example (might want to run full screen):

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  $('#test').dialog('option', 'position', [30, 30]);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

Run it, press the button, the dialog does not move.

Why isn't this working for me and how do I set the x,y position of a dialog?

Note that the dialog must remain both draggable and resizable after the position change.

Improve this question

1 Answer 1

Reset to default
3

I think I got it to work .. by using 

position: { my: "left top", at: "left+"+x+" top+"+y+"", of: window }

and by reading the .position() documentation

I reached to this

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

Improve this answer
2
  • Awesome. Yes it's working great. Thanks! I'm going to do it this way, but I'm still kinda curious why [x,y] wasn't working for me. Who knows...
    – Jason C
    Commented Jun 6, 2017 at 3:44
  • @JasonC I don't know where did you read about [x,y] while the dialog documentation is read dialog position
    – Mohamed-Yousef
    Commented Jun 6, 2017 at 3:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.