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...

Solution 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.

Solution 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); 
}

});

Solution 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.