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.