JQuery UI resizable() changes width when resizing the height

Question

I have a problem here with resizing. I'm using the JQuery .resizable() on a div with the following css:

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

It also contains lots of other divs and other stuff. I attach the resizable this way:

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

The widgetResizeListener() just logs something in console for now.

Now when I'm trying to change the div's height by dragging it's ui-resizable-s side, it automatically changes the div's width by about 30px. It happens every time when I start dragging. And so the desired width is lost every time. The same thing happens with height when changing the width.

Now I wonder if that's because of the padding my div has? Because before, when there was no padding, such "jumpy" things would not happen. Now I cannot remove the padding as it's really needed. So how this problem can be solved? I mean is there a way to include the padding in JQuery resizable() ?

Any help will be appreciated, thanks...

Inflict

use outline instead of border css property. outline: 1px solid #800; – Nies

Answer 1

I think it is the combination of box-sizing: border-box; and the padding. The resizable-function fails with this css-property.

Try to change the box-sizing to default (box-sizing: content-box), or make an inner container for the padding.

Cobos

I tried to put a jquery resizable inside of a jquery modal dialog and saw the same problem. I explicitly set the box-sizing: content-box on the resizable and the problem went away too. – Neuropath

Oh this was a brilliant answer! Even today after 4 yrs since that answer it is helpful! thanks a lot :) – Joslyn

Answer 2

if removing the box-sizing property is out of the question like my case I found a different solution that might help. It's not the prettiest but it works. Didn't test the exact code but the idea is you have to add the padding widths on while resizing and then change it back when it stops. IMPORTANT: if it's possible the element doesn't have padding you will have to add an if statement to conclude if there's a padding value set or not

var padLeft, padRight, padTotal; // define vars 

$('#resize').resizable({

start: function(event,ui){
   padLeft = this.css('padding-left').replace('px','');
   padRight = this.css('padding-right').replace('px','');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event,ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event,ui){
   this.css('width',ui.size.width - padTotal); 
}

});

Goahead

I had about the same idea. Resizable seems to forget the padding, so you need to add it manually to $ui.size on "start". When resizing, that is on "resize", I had to update the element's size but it didn't work with the above method as $ui.size only seems to be used to read the size (at least in my version of Resizable). Instead I had to update $ui.element via jquery: $ui.element.width($ui.size.width); and on "stop" I had to add the padTotal, not substract it: size = $ui.size.width+30; If this could help anyone... – Kowalski

Answer 3

I know this is an old issue but I came across the same problem because I'm using the Foundation library, which applies box-sizing border box to all elements. You can fix it by editing one line in the jQuery UI resizable widget code. The fix is in

_mouseCapture

And I applied the following code

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

You may or may not have to edit the height values as I have done. Depending upon which div I applied the resizable, ie the foundation container for each grid element, or a div nested inside of it, I had to either remove or include the height adjustment.

You can look here for how to edit the jQuery widget without having to alter the core library but I haven't quite gotten this to work yet

How to extend a jquery ui widget ? (1.7)

I'm getting errors further down the line in the resizable object functions. If anyone has suggestions on this I would be excited to hear them.

Nicholas

Answer 4

One alternative we have used in cases where box-sizing:border-box is a must is the following.

In the resizeable callback implementation: 1. In start we set the box-sizing:content-box 2. In stop we set it back to box-sizing:border-box

In other words we temporarily set it to the default content-box during resizing to avoid the jumping behavior caused by resizeable when border-box is used.

Interrelate

Answer 5

You can user 'handles' paramter to deal with this problem. like this:

$( "#resizable" ).resizable({handles: 'e,w'});

Brassy