Skip to main content

Search and Top Navigation

#6641 open bug ()

Opened November 09, 2010 03:27PM UTC

Last modified October 26, 2012 01:30AM UTC

Resizable: margin:auto bug in FF, Opera, IE

Reported by: raavo Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.8.6
Keywords: resizable margin auto firefox mozilla opera haspatch Cc:
Blocked by: Blocking:
Description

SUBJECT: Centered element with auto margins.

PROBLEM: Broken left/top position while being resized.

RESULT: Resizable element appears to be jumpy.

CAUSE: This is caused by bugfix no 1749 and it's incompatibility with auto margins.

AFFECTED BROWSERS: FF, Opera, IE

EXAMPLE:

http://editor.24hravi.net/bug.htm

<div  style="position:absolute;left:1px;right:1px;margin:auto;width:50%;height:50%"></div>

Initial margin-left from style: auto;

Initial left position from style: 1px;

Computed margin-left from browser: 0px;

Computed left position from browser: 1px+25%;

RESIZABLE 1.8.6:

	_mouseStart: function(event) {

		var o = this.options, iniPos = this.element.position(), el = this.element;

		this.resizing = true;
		this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };

		// bugfix for http://dev.jquery.com/ticket/1749
		if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
			el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
		}

SUGGESTED FIX:

	_mouseStart: function(event) {

		var o = this.options, el = this.element;

		this.resizing = true;
		this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };

		// bugfix for http://dev.jquery.com/ticket/1749
		if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
			el.css({ position: 'absolute', top: el.css('top'), left: el.css('left') });
		}

ADDITIONAL:

Browser info about "auto" margins: http://www.3d3r.com/simon/marginAutoComputedValue/

Attachments (0)
Change History (4)

Changed November 09, 2010 03:59PM UTC by raavo comment:1

Cannot find where I can edit this ticket. Wanted to edit the fix :) Guess I'll have to leave it to you guys.

Changed November 09, 2010 04:05PM UTC by raavo comment:2

PROBLEM EXAMPLE IN JSFIDDLE:

http://jsfiddle.net/JwtFb/

Changed October 11, 2012 09:07PM UTC by scottgonzalez comment:3

milestone: TBD2.0.0

Changed October 26, 2012 01:30AM UTC by tj.vantoll comment:4

keywords: resizable margin auto firefox mozilla operaresizable margin auto firefox mozilla opera haspatch
status: newopen
summary: Resizable margin:auto bug in FF, Opera, IEResizable: margin:auto bug in FF, Opera, IE