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

[svanduss]

initial error

When resizing an element that has border-box set the position of the cursor is outside of the element that is being dragged.

additional error

Additionally upon re-sizing the element horizontally the bottom edge moves upward making the box smaller, and when re-sized vertically the right edge moves left, and again makes the box smaller.

potential fix

detect border-box and don't subtract padding from width or height.

example:

​http://jsfiddle.net/svanduss/JLQce/5/

[svanduss]

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/

[tj.vantoll]

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

[tj.vantoll]

#8960 is a duplicate of this ticket.

[tj.vantoll]

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.

[tj.vantoll]

#9137 is a duplicate of this ticket.

[fejesjoco]

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

[fejesjoco]

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

[mathrick]

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.

[henric]

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.

[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/

[tj.vantoll]

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

[Scott González]

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

[dekajp]

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

[Scott González]

Replying to 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?

[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()

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

[mikesherov]

Replying to 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!)

[razvanphp]

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

[mikesherov]

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.

[Scott González]

#10948 is a duplicate of this ticket.

[gu.jefers]

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

  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

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

[Scott González]

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.

[aljebro]

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.

[Scott González]

#11135 is a duplicate of this ticket.

[ilanc]

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

[Fez Vrasta]

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