Opened 10 years ago

Last modified 7 years ago

#8932 assigned bug

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/

Change History (26)

comment:1 Changed 10 years ago by 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/

comment:2 Changed 10 years ago by tj.vantoll

Milestone: 1.10.02.0.0
Status: newopen
Summary: bug: ui.resizable and border-boxResizable: Sizing issue with box-sizing: border-box and padding

comment:3 Changed 10 years ago by tj.vantoll

#8960 is a duplicate of this ticket.

comment:4 Changed 10 years ago by tj.vantoll

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.

comment:5 Changed 10 years ago by tj.vantoll

#9137 is a duplicate of this ticket.

comment:6 Changed 9 years ago by fejesjoco

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

comment:7 Changed 9 years ago by 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.)

comment:8 Changed 9 years ago by mikesherov

Owner: set to mikesherov
Status: openassigned

comment:9 Changed 9 years ago by 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.

comment:10 Changed 8 years ago by 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.

comment:11 Changed 8 years ago by 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/

comment:12 in reply to:  11 Changed 8 years ago by 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.

comment:13 Changed 8 years ago by Scott González

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

comment:14 in reply to:  13 ; Changed 8 years ago by 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 .

comment:15 in reply to:  14 Changed 8 years ago by 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?

comment:16 Changed 8 years ago by 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!)

comment:17 in reply to:  16 Changed 8 years ago by 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!)

comment:18 Changed 8 years ago by 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

comment:19 Changed 8 years ago by 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.

comment:20 Changed 8 years ago by Scott González

#10948 is a duplicate of this ticket.

comment:21 Changed 8 years ago by 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
    

comment:22 Changed 8 years ago by 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.

comment:23 Changed 8 years ago by 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.

comment:24 Changed 8 years ago by Scott González

#11135 is a duplicate of this ticket.

comment:25 Changed 8 years ago by 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

comment:26 Changed 7 years ago by Fez Vrasta

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

Note: See TracTickets for help on using tickets.