#8506 closed bug (invalid)

Opened August 17, 2012 10:06PM UTC

Closed November 19, 2012 09:06AM UTC

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

Reported by: kenaniah Owned by: kenaniah
Priority: minor Milestone: 2.0.0
Component: ui.resizable Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (8)

Changed August 17, 2012 10:12PM UTC by scottgonzalez comment:1

component: ui.core → ui.resizable

Changed August 17, 2012 10:12PM UTC by kenaniah comment:2

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.

Changed August 19, 2012 01:55PM UTC by scottgonzalez comment:3

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.

Changed August 19, 2012 02:02PM UTC by scottgonzalez comment:4

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

Changed August 20, 2012 05:05PM UTC by kenaniah comment:5

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"]

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:6

milestone: 1.9.0 → 2.0.0

Changed November 05, 2012 12:23AM UTC by tj.vantoll comment:7

owner: → kenaniah
status: new → pending

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
?

Changed November 19, 2012 09:06AM UTC by trac-o-bot comment:8

resolution: → invalid
status: pending → closed

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!