Bug Tracker

Opened 6 years ago

Closed 6 years ago

#14129 closed bug (notabug)

JQuery "-webkit-box-sizing" clash...with .resizable()

Reported by: jpeters@… Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

Pretty straight forward, when the following CSS is set to any object that has .resizable() applied. It becomes extremely problematic when the "containment" option is set as you will see in the demo, as it limits the ability to increase the size equal to the amount of padding/border specified in the CSS.

Also you'll note that it jumps when you initially click to resize, equal to the amount of padding/border specified in the CSS as well.


CSS:

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

Demo: http://jsfiddle.net/muNjL/

Proposed Solution: In the next release of jQuery add a simple check for this CSS definition, if set ignore padding/border and just return the true height/width.


Side Note: I personally like border-box as opposed to the default (content-box), because it simply makes sense, and clears up a lot of extraneous HTML code needed to replicate the same effect.

Change History (1)

comment:1 Changed 6 years ago by timmywil

Resolution: notabug
Status: newclosed

Thanks for contributing! Please file a bug report with jQuery UI.

Note: See TracTickets for help on using tickets.