jQuery UI position()

Question

I cant figure out how to position an element using jQuery ui position()

for example:

  $("#element").position({
        my: 'center top',
        at: 'center top',
        of: '.content' 
    });

this works and element is position top center of parent, but this

  $("#element").position({
        my: 'center bottom',
        at: 'center bottom',
        of: '.content' 
    });

does not work. The same goes for bottom left and bottom right.

I have created jsbin https://jsbin.com/kuzaketaqi/edit?html,js,output

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent'
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000;position:relative">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0;position:absolute;top:10px;left:10px"></button>
</div>

You are including multiple versions of jquery, and you are including one after you are including jquery ui, which is causing it to not exist on the jQuery namespace anymore. Only include one version and make sure jquery ui is included after it. — Taplar, Dec 22 '16 at 01:21
Also for future note, instead of linking to an off site snipplet, type Ctrl+M in the stack overflow editor to open the onsite editor to create a working example of the issue. — Taplar, Dec 22 '16 at 01:23
I have fixed jquery conflict. Thanks for Ctrl+M i did not know about it. — Alko, Dec 22 '16 at 01:31

kukkuz · Accepted Answer · 2016-12-22T01:48:05.267

1

When the full height of #parent is not visible in the browser viewport, the bottom positions may not work - give within: '#parent' parameter (the default is window and the positioning will be restricted to the viewport!)

See demo below:

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent',
    within: '#parent'
  });
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0"></button>
</div>

edited Dec 22 '16 at 01:48

answered Dec 22 '16 at 01:23

kukkuz

41,512
6
59
95

I have fixed the jquery conflict. Check your example the same problem I'm having. Try L/B, R/B and C/B which is left-bottom, right-bottom and center bottom – Alko Dec 22 '16 at 01:31
I did not solve it, still having problem with those 3 positions. – Alko Dec 22 '16 at 01:35
@Alko when the `#parent` is not fully visible in the viewport it is not working, expand the snippet and it works... I'm checking why that happens... – kukkuz Dec 22 '16 at 01:38
You're absolutely right. If viewport is not fully visible then it does not work. It seems like a bug to me. – Alko Dec 22 '16 at 01:44
@Alko seems you need to specify the `within` parameter - the default is `window` and so restricted to the viewport... – kukkuz Dec 22 '16 at 01:48
1

you saved my day. Thank you very much. I have accepted your answer. – Alko Dec 22 '16 at 01:53

jQuery UI position()

1 Answers1