Jquery ui resizing from top bugs

Question

When I try to resize an element from the top (and even if it look like it's resizing), I notice that the bottom side is resized instead.

HTML :

<div class="resizeme" style="background:yellow;">Resize me from the top</div>

JS

$(".resizeme").resizable({
    handles: "n,s,e,w"
});

jsfiddle :

http://jsfiddle.net/mody5/4x3r8vsq/

How I can correct that ?

Answer 1

By resizing you're changing the height and width, you're not changing the way content within the resizable element is positioned or aligned.

So, really the resizable element is behaving as expected, it just looks odd without a point of reference. Think of it like stretching it from the handle you're grabbing, the other sides stay put while the edge you grabbed moves.

Try this:

jsFiddle

$(document).ready(function() {
  $(".resizeme").resizable({
    handles: "n,s,e,w"
  });
});

.resizeme {
  position: relative;
  top:20px;
  background: yellow;
  padding: 6px;
  height: 100px;
  width: 200px;
}
#top {
  position: fixed;
  top: 28px;
  background: red;
}
#bottom {
  position: fixed;
  bottom: 60px;
  background: blue;
}

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="resizeme">
</div>
<span id="top">Resize me from the top</span><span id="bottom">Resize me from the bottom</span>