Skip to main content

Search and Top Navigation

#8932 assigned bug ()

Opened December 24, 2012 03:53AM UTC

Last modified July 26, 2016 02:39PM UTC

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

Reported by: svanduss Owned by: mikesherov
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

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/

Attachments (0)
Change History (26)

Changed December 24, 2012 04:05AM UTC by svanduss comment:1

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/

Changed December 24, 2012 02:07PM UTC by tj.vantoll comment:2

milestone: 1.10.02.0.0
status: newopen
summary: bug: ui.resizable and border-boxResizable: Sizing issue with box-sizing: border-box and padding

Changed January 14, 2013 11:34PM UTC by tj.vantoll comment:3

#8960 is a duplicate of this ticket.

Changed January 14, 2013 11:36PM UTC by tj.vantoll comment:4

summary: Resizable: Sizing issue with box-sizing: border-box and paddingResizable: Sizing issue with box-sizing: border-box and padding/border
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.

Changed March 06, 2013 01:18PM UTC by tj.vantoll comment:5

#9137 is a duplicate of this ticket.

Changed November 21, 2013 02:25PM UTC by fejesjoco comment:6

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

Changed November 22, 2013 10:19AM UTC by fejesjoco comment:7

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

Changed December 08, 2013 01:28AM UTC by mikesherov comment:8

owner: → mikesherov
status: openassigned

Changed July 31, 2014 12:26PM UTC by mathrick comment:9

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.

Changed October 17, 2014 01:10PM UTC by henric comment:10

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.

Changed October 18, 2014 04:46AM UTC by dekajp comment:11

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

Changed October 18, 2014 01:12PM UTC by tj.vantoll comment:12

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.

Changed October 18, 2014 01:51PM UTC by scottgonzalez comment:13

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

Changed October 28, 2014 08:52AM UTC by dekajp comment:14

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 .

Changed October 28, 2014 10:42AM UTC by scottgonzalez comment:15

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?

Changed November 26, 2014 09:49AM UTC by joieop comment:16

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

Changed November 27, 2014 12:04PM UTC by mikesherov comment:17

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

Changed January 27, 2015 10:08PM UTC by razvanphp comment:18

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

Changed January 27, 2015 11:43PM UTC by mikesherov comment:19

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.

Changed February 03, 2015 02:55AM UTC by scottgonzalez comment:20

#10948 is a duplicate of this ticket.

Changed February 03, 2015 04:54AM UTC by gu.jefers comment:21

#!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

Changed February 03, 2015 12:01PM UTC by scottgonzalez comment:22

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.

Changed February 16, 2015 03:44PM UTC by aljebro comment:23

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.

Changed February 19, 2015 12:52PM UTC by scottgonzalez comment:24

#11135 is a duplicate of this ticket.

Changed February 19, 2015 01:49PM UTC by ilanc comment:25

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

Changed July 26, 2016 02:39PM UTC by FezVrasta comment:26

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