Skip to main content

Search and Top Navigation

#11113 closed bug (fixed)

Opened February 16, 2015 11:17AM UTC

Closed October 16, 2015 02:30PM UTC

Last modified October 16, 2015 02:30PM UTC

Resizable: with helper, dragging horizontally or vertically only reduces opposite direction by 1px

Reported by: lukepage Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.resizable Version: 1.10.0
Keywords: regression Cc:
Blocked by: Blocking:
Description

reproduced using demos page.

http://jqueryui.com/resizable/#helper

At least in modern chrome, modern firefox and IE10.

Resize up and down continually and you will see the width shrink by 1px per operation. Resizing the width continually and the height shrinks. Use the horizontal only/vertical only handles.

This does not happen when also using a grid.

Cause seems to be the following code

https://github.com/jquery/jquery-ui/blob/1.11.3/ui/resizable.js#L683

which shrinks the width/height by 1px and then because that dimension cannot be changed, causes the size to be decreased by 1. I haven't figured out why you decrement by 1px (perhaps a comment would be useful?) but not taking away 1px when resizing in a fixed dimension appears to fix the problem, I just don't know the implications of it.

I found this possibly related issue: http://bugs.jqueryui.com/ticket/7271 which appears to be the opposite effect and only in IE7/IE8.

Attachments (0)
Change History (4)

Changed February 18, 2015 03:22PM UTC by tj.vantoll comment:1

keywords: → regression
status: newopen
version: 1.11.31.10.0

This regressed in 1.10.0.

Here's it working in 1.9.2: http://view.jqueryui.com/1.9.2/demos/resizable/helper.html

Here's it failing in 1.10.0: http://view.jqueryui.com/1.10.0/demos/resizable/helper.html

The last commit to touch the line of code you reference landed in 1.10.0, which seems pretty suspicious: https://github.com/jquery/jquery-ui/commit/d73edfff.

Changed February 18, 2015 03:57PM UTC by eXaminator comment:2

We also noticed this bug today. A fix would be very welcomed as this can really break things.

Here's a small function that we use as a temporary fix, maybe it helps someone else. Thanks for the tip with the grid.

It won't help with elements that can be resized in both directions, but then 1 pixel difference might not be a big problem anyway.

function gridFix(handles) {
    var isHorizontallyResizable = handles.indexOf('e') >= 0 || handles.indexOf('w') >= 0,
        isVerticallyResizable = handles.indexOf('n') >= 0 || handles.indexOf('s') >= 0,
        grid = [2, 2];

    if (isHorizontallyResizable) {
        grid[0] = 1;
    }

    if (isVerticallyResizable) {
        grid[1] = 1;
    }

    return grid;
}

elem.resizable({
    "handles": handles,
    "helper": true,
    "grid": gridFix(handles)
});

Changed October 16, 2015 02:30PM UTC by Scott González comment:3

resolution: → fixed
status: openclosed

Resizable: Remove mysterious helper dimension adjustments

Fixes #11113

Closes gh-1615

Changeset: 7df2f1905a1ec4727f00451f8d794aeb35ec4159

Changed October 16, 2015 02:30PM UTC by scottgonzalez comment:4

milestone: none1.12.0