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

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.

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

});