CODEWITHSUNDEEP
jquerycssjquery-uiresizablejquery-resizable
ArVan
ArVan

Reputation: 4275

JQuery UI resizable() changes width when resizing the height

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

Upvotes: 6

Views: 11924

Answers (5)

user7319901
user7319901

Reputation: 1

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

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

Upvotes: 0

Fernando
Fernando

Reputation: 43

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.

Upvotes: 0

dtothefp
dtothefp

Reputation: 1364

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.

Upvotes: 1

user1896534
user1896534

Reputation: 101

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

});

Upvotes: 2

Bastian Rang
Bastian Rang

Reputation: 2187

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.

Upvotes: 23

Related Questions