CODEWITHSUNDEEP
javascriptjquery
Simon Novak
Simon Novak

Reputation: 95

jquery resizable with absolute position

I have following problem: I need to make my div re-sizable, but it needs to be located on right bottom of the page. When I use jquery resizable function and position: absolute, div jumps around...

Sample

Code:

$('#resizable').resizable({
  handles: {
    'nw': '#nwgrip',
    'n': '#ngrip',
    'w': '#wgrip'
  }
});

  <div id='resizable'>
    <div id='content'>
      Im Resizable!
    </div>
    <!-- Define corners -->
    <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
    <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
  </div>

Upvotes: 0

Views: 1567

Answers (1)

Andy
Andy

Reputation: 30135

The problem is that resizable uses top left with and height to set the element's position.

Now yours is positioned with right and bottom at the beginning, so the moment the resizable updates the position, right will be deleted and left will be set. (to 0 because it doesn't exist).

So you'll have to calculate the left position at page load or maybe on resize start

Upvotes: 3

Related Questions