CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
SCHTAILian
SCHTAILian

Reputation: 448

jQuery UI strange resize behaviour

I have a div which is resizable from the left (w) and the right (e) using jQuery UI. Resizing on the right works perfectly, but on the left two things behave different:

  1. I can't resize the element to 0 width
  2. It jumps when resizing starts

I made this fiddle

$("#test").resizable({
    handles: 'e,w',
    grid: 32,
    maxWidth: null,
    minWidth: 0
});

Why is that so?

Thanks

Edit Grid 32 is needed, but you are right, it would work without.

Upvotes: 0

Views: 103

Answers (2)

SCHTAILian
SCHTAILian

Reputation: 448

I found a solution.

I overwrite jQuery UI's $.ui.plugin.add("resizable", "grid") on resize start. Not the best solution I think but it works.

Here you can see the changes I made in the last if-else:

Old:

if ( newWidth - gridX > 0 ) {
    that.size.width = newWidth;
    that.position.left = op.left - ox;
} else {
    that.size.width = gridX;
    that.position.left = op.left + os.width - gridX;
}

Customised:

if ( newWidth - gridX >= 0 ) {
    that.size.width = newWidth;
    that.position.left = op.left - ox;
} else {
    that.size.width = o.minWidth;
    that.position.left = op.left + os.width - gridX;
}

Upvotes: 0

Priya
Priya

Reputation: 1425

Remove grid: 32. It causes the problem you are facing.

Upvotes: 1

Related Questions