Opened 7 years ago

Closed 6 years ago

#8506 closed bug (invalid)

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.

Change History (8)

comment:1 Changed 7 years ago by Scott González

Component: ui.coreui.resizable

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

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

comment:4 Changed 7 years ago by Scott González

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

comment:5 Changed 7 years ago by 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"]

comment:6 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:7 Changed 6 years ago by tj.vantoll

Owner: set to kenaniah
Status: newpending

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?

comment:8 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

Note: See TracTickets for help on using tickets.