Ticket #3882 (closed bug: fixed)

Opened 6 years ago

Last modified 5 years ago

Resizable - Left Margin Calculated Incorrectly (Using Containment)

Reported by: braddunbar Owned by: scott.gonzalez
Priority: critical Milestone: 1.7
Component: ui.resizable Version: 1.6rc5
Keywords: Containment Cc:
Blocking: Blocked by:

Description

When using containment, the right side of a resizable does not stop at the edge of the containment. It stops at the left offset of the containment element.

A revised version of the basic resizable demo is included to demonstrate this. The only changes are to the containing div.demo, and the containment option.

I believe this is due to the calculation of woset in the containment plugin.

Attachments

default.html Download (1.2 KB) - added by braddunbar 5 years ago.
Demo with "postion: relative;" on ".demo" element
ui.resizable.js Download (25.1 KB) - added by braddunbar 5 years ago.
Include check for absolutely positioned parent

Change History

comment:1 Changed 6 years ago by scott.gonzalez

  • Priority changed from minor to critical
  • Milestone changed from TBD to 1.6

comment:2 Changed 6 years ago by eduardo

  • Status changed from new to closed
  • Resolution set to fixed

Fixed when #3733 was fixed

Changed 5 years ago by braddunbar

Demo with "postion: relative;" on ".demo" element

comment:3 Changed 5 years ago by braddunbar

If the ".demo" element has "position:relative;" then the incorrect behavior is still present.

I am continuing to look into this.

comment:4 Changed 5 years ago by rdworth

  • Status changed from closed to reopened
  • Resolution fixed deleted

comment:5 Changed 5 years ago by braddunbar

When the container element is positioned relatively and is also the parent of the resizable element, woset should not include the container offset.

I added the following lines starting at line number 706 to fix this issue:

var isParent = self.containerElement.get(0) == self.element.parent().get(0),
    isParentRelative = self.containerElement.css('position') == 'relative';

if(isParent && isParentRelative) woset -= self.parentData.left;

The isParent and isParentRelative checks should be placed in the start function to prevent calling them over and over, but I thought including them here would make the concept easier to grok.

Note that this may also be the case for absolutely positioned parent elements. I will look into this.

Changed 5 years ago by braddunbar

Include check for absolutely positioned parent

comment:6 Changed 5 years ago by braddunbar

This does indeed seem to affect absolutely positioned parent containers, changing the patch code to:

var isParent = self.containerElement.get(0) == self.element.parent().get(0),
    isOffsetRelative = /relative|absolute/.test(self.containerElement.css('position'));

if(isParent && isOffsetRelative) woset -= self.parentData.left;

comment:7 Changed 5 years ago by rdworth

  • Owner set to scott.gonzalez
  • Status changed from reopened to assigned

comment:8 Changed 5 years ago by scott.gonzalez

  • Status changed from assigned to closed
  • Resolution set to fixed

Fixed in r2107. Thanks for the patch.

Note: See TracTickets for help on using tickets.