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

285 Views Asked by At

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/

1

There are 1 best solutions below

0
Twisty On

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.