How to fix " this moving box under resizable box while dragging up

Question

I'm making a resizable box on mobile. the problem is that this text under this box is keep moving while dragging the top edge of the box. i don't know where to fix?

help me! please.

$('#resize').resizable({
    helper: "ui-resizable-helper",
    handles:'n'
});

check this problem on the jsfiddle.

https://jsfiddle.net/blossom/yt6o34d5/22/

Answer 1

When you resize from the North ("n"), the height and the top styles are adjusted. If you want to shrink from the top, you want to drop the top styling. This can be done with .css() by setting it back to 0 or removing it ("" value).

Example: https://jsfiddle.net/Twisty/2ov0fbr7/

JavaScript

$(function() {
  $('#resize').resizable({
    helper: "ui-resizable-helper",
    grid: [10, 10],
    handles: 'n',
    stop: function(e, ui) {
      ui.element.css("top", "");
    }
  });
});

Hope that helps.