Resizable: Sizing issue with box-sizing: border-box and padding/border

further review returned this result. for jquery 1.8+ use outerwidth to determine the width of an element.

http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

Verified and reduced - http://jsfiddle.net/tj_vantoll/9PBfz/.

#8960 is a duplicate of this ticket.

border

also needs to be accounted for. Try resizing the box here and you will see a slight movement when starting http://jsfiddle.net/gcBU6/. Change

border

to

outline

and the example will work as expected.

#9137 is a duplicate of this ticket.

Still happening in 1.10.3, here's my fiddle where it's really apparent: http://jsfiddle.net/jzL3k/

Please consider raising the priority of this bug. Every browser supports the new box-sizing model, and more and more frameworks are defaulting to border-box, because it simply makes more sense, like Bootstrap 3 (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/). (It makes perfect sense to use jQuery UI together with many other frameworks.)

This should be bumped to major, since Bootstrap and many other CSS frameworks set box-border on all elements. That makes resizable hard to use in general, and completely broken and useless with aspectRatio: true.

Any updates on this? The grid in Zurb Foundation 3 is built on border-box and many of us prefer to use border-box all the time.

@mikesherov @tj

i did a quick search on box-sizing , could not find anything. hence came up with my own methods on resizable _outerWidth and _outerHeight

_outerHeight: function(){
		var el = this.element;
		if ( el.css( 'box-sizing' ) === 'border-box' ) { 
			return parseFloat( $( el ).css( "height" ) )
		} else {
			// Assume content-box
			return el.height();
		}
	}

I feel 'box-sizing' methods needs to go in core . let me know your thoughts on this . here is the fiddle. http://jsfiddle.net/dekajp/qx9ojw4j/

Replying to [comment:11 dekajp]:

@mikesherov @tj i did a quick search on box-sizing , could not find anything. hence came up with my own methods on resizable _outerWidth and _outerHeight

> _outerHeight: function(){
> 		var el = this.element;
> 		if ( el.css( 'box-sizing' ) === 'border-box' ) { 
> 			return parseFloat( $( el ).css( "height" ) )
> 		} else {
> 			// Assume content-box
> 			return el.height();
> 		}
> 	}
> 

I feel 'box-sizing' methods needs to go in core . let me know your thoughts on this . here is the fiddle. http://jsfiddle.net/dekajp/qx9ojw4j/

I'm actually shocked that this isn't handled in Core already. We have a WIP PR for accordion that does also works around

.outerHeight()

: https://github.com/jquery/jquery-ui/pull/1287. I think your change here is good, but we should follow up on why Core doesn't handle this.

Core has been properly handling box-sizing for a while; .height() will always be the content height.

Replying to [comment:13 scott.gonzalez]:

Core has been properly handling box-sizing for a while; .height() will always be the content height.

I propose a _height() within Resizable which will handle border-box and padding-box .

Replying to [comment:14 dekajp]:

I propose a _height() within Resizable which will handle border-box and padding-box .

What do you mean by "handle border-box and padding-box"? How is this different from methods in jQuery core?

I think, bug actually happens because inside resize plugins width&height been reading with JUquery.width()/height(), but setting back with css({height, width}). JUquery.width()/height() properly handle border-box but .css() ignore. I think, css() need to be changed to width()/height()

P.S this bug also affect 'alsoResize' (and with two different box-sizing models there is much more devastating effect!)

Replying to [comment:16 joieop]:

I think, bug actually happens because inside resize plugins width&height been reading with JUquery.width()/height(), but setting back with css({height, width}). JUquery.width()/height() properly handle border-box but .css() ignore. I think, css() need to be changed to width()/height()

Bingo. .height() is always content height and .css('height') is always the height reported by css which are different for border box situations.

I'm currently the owner of this bug, and will fix this shortly. Thanks for the patience!

P.S this bug also affect 'alsoResize' (and with two different box-sizing models there is much more devastating effect!)

How can this bug stay without a fix for 2 years?

Starting with Bootstrap 3, box-sizing: border-box; is default, I found more than 5 questions about this on stackoverflow pointing to this bug, but somehow it is still ignored.

Looks like jQuery (UI) time has passed..

PS: this bug also affects 'grid' option

razvanphp, jQuery UI is free open source software that is worked on mostly by volunteers in their free time. If a bug isn't fixed it's because no one has volunteered their free time to patch it yet.

Insulting those volunteers and the project won't make it get fixed any quicker. Submitting a well tested, well written pull request fixing the issue will.

#10948 is a duplicate of this ticket.

#!rst
Problem
-----------------------------------------

 ::

     When initialize the size data,width() is used,but when set width,css() is used.

Solve
-----------------------------------------

 ::
  
     Replace the css function with width and height

Code
-----------------------------------------

* ui.resizable,_mouseDrag

  .. code-block:: js

     if(this.size.width != prevWidth){
         //props.width=this.size.width + "px";//old code
         el.width(this.size.width);
     }

     if(this.size.height != prevHeight){
         //props.height = this.size.height + "px";//old code
         el.height(this.size.height);
     }

* alsoResize,resize

  .. code-block:: js

   $(.each(css,function(i,prop) {
      var sum=(start[prop]||0) + (delta[prop]||0);
      if(sum && sum >= 0){
          if($.inArray(prop,['width','height'])>=0){
              el[prop](sum);
          }else{
              el.css(prop,sum);
          }
      }
   }
   //el.css(style);//removed

Thanks for your interest in fixing this bug. If you'd like to propose a change, the correct process is to send a pull request along with tests. Please start by reading the contributing guidelines.

Code in 1.11.3 jQuery UI is changed and this solution cann't be applied "as is". I try to fix it, but I cann't understand all ( http://stackoverflow.com/questions/28532779/jquery-ui-dialog-resize ). I think that problem not only in using .css instead of width, height and affect left and top get values methods in mouse handlers.

#11135 is a duplicate of this ticket.

I've submitted a pull request which solves both problems - i.e. border-box on resized element as well as on resizable({ alsoResize: ... })

https://github.com/jquery/jquery-ui/pull/1451

I can still reproduce this bug on the latest version, any solution?