Resizable does not properly calculate width / height when box-sizing is different

[kenaniah]

All elements when resized are currently (as of 1.8.23) calculated using .width() and .height(), but are saved using .css(). The CSS interpretation of the width / height properties is subject to the box-sizing property.

As a result of this approach, elements that have a box model other than content-box will "jump" upon the initialization of a resize operation due to the miscalculation of the initial width and height.

An example of this behavior can be found when resizing the dialog on the demo page (​http://jqueryui.com/demos/dialog/#default) in Chrome.

[kenaniah]

Added pull request ​https://github.com/jquery/jquery-ui/pull/713

Resizable: fixed width/height calculations to honor the current box-sizing when resizing elements.

[Scott González]

It doesn't really make sense that this would be showing up on the default dialog demo. All element in the demo use box-sizing: content-box and the same behavior exists with jQuery 1.7.2 which doesn't handle box-sizing for .width(). I just did a quick test and the dialog problem started in 1.8.17, so that's where we should start looking for the actual cause.

[Scott González]

Interestingly the dialog bug is caused by a change in position: ​https://github.com/jquery/jquery-ui/commit/bfbc0b1fb3c0bf43ccbaefd03bcfa2cf19ea4a03

[kenaniah]

Scott, that seems to only be part of it. It looks like this bug consists of two separate issues -- the one you mentioned above as well as an issue with the way .css() is calculated. I'll open a bug with jQuery for .css() once I get around to reducing the test case that caused this example:

// .ui-dialog was given an explicit width of 500px in a CSS style directly on the element

console.debug([
    $(".ui-dialog").css('width'), 
    $(".ui-dialog").get(0).style.width, 
    getComputedStyle($(".ui-dialog").get(0)).width
]);
// returns ["498px", "500px", "500px"]

[tj.vantoll]

There's some discussion of this issue in this in @kenaniah's pull request (​https://github.com/jquery/jquery-ui/pull/713) which has since been closed. @kenaniah - Now that the dialog demo has been fixed, can you provide an example showing an issue this creates with resizable?

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!