Skip to main content

Search and Top Navigation

#4792 closed bug (worksforme)

Opened August 19, 2009 02:23PM UTC

Closed October 29, 2012 05:37AM UTC

Sorting - adding left: top: css propertyes

Reported by: FDisk Owned by:
Priority: major Milestone: 2.0.0
Component: ui.sortable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

I'm using Opera. There is some css bug. After i drag and drop the sortable element I got unexpected results. ui.sortable.js adds top and left css attributes. How to disable this?

Before

[[Image(http://i28.tinypic.com/206mx77.png)]]


After

[[Image(http://i25.tinypic.com/k06cgj.png)]]

Attachments (1)
  • sortable.html (1.4 KB) - added by Zajec July 08, 2010 12:47PM UTC.

    Minimal test-case for problem.

Change History (12)

Changed August 22, 2009 01:19PM UTC by paul comment:1

Can you provide a reduced test case?

Changed August 26, 2009 11:18AM UTC by FDisk comment:2

Changed November 23, 2009 01:11AM UTC by scottgonzalez comment:4

milestone: TBD1.8

Changed July 08, 2010 11:37AM UTC by Zajec comment:5

While I can not reproduce this problem using http://jqueryui.com/demos/sortable/ or http://jqueryui.com/demos/sortable/portlets.html I still experience this locally using 1.8.2.

When element is being moved it receives position:absolute and dynamically-changed left and top. That's totally right and correct!

However after finishing movement one of following actions should be performed:

1. All styles removed (position, left, top) = the "cleanest" solution

2. Position changed to static (or just removed, as static is default) and left and top left - this will work as left and top are ignored for static

3. Position changed to relative, plus left and top zeroed or removed.

If you're not sure how positioning works, check http://www.w3.org/TR/CSS2/visuren.html#choose-position

Changed July 08, 2010 11:38AM UTC by Zajec comment:6

Actions from previous comment correctly styled:

1. All styles removed (position, left, top) = the "cleanest" solution

2. Position changed to static (or just removed, as static is default) and left and top left - this will work as left and top are ignored for static

3. Position changed to relative, plus left and top zeroed or removed.

Changed July 08, 2010 12:48PM UTC by Zajec comment:7

The problem is exposed when we use both: sortable and resizable. In such a case "position: relative;" is applied which comes from resizable styles.

This affects only Opera as in Opera left and top are not zeroed.

Changed July 08, 2010 12:54PM UTC by Zajec comment:8

Possible workaround:

$('ul').sortable({
	update: function() {
		/* workaround for http://dev.jqueryui.com/ticket/4792 */
		$(this).find('li').css('left', '0').css('top', '0');
	}
});

Changed October 04, 2010 12:21PM UTC by hallvors comment:9

this._getRelativeOffset() in jQuery UI will return some object with "top" and "left" properties that are some pixels different from what they are in Chrome. The reason is that Opera's getComputedStyle() method returns pixel values for top/left/bottom/right for certain relatively positioned elements without explictly specified values for those properties. WebKit and Gecko return 'auto' here.

(Opera tracks this issue as CORE-13758 and intends to fix it and align with other browsers, likely in the next major update after 10.6x, so one option here is to do nothing and wait for an Opera fix)

Changed October 04, 2010 12:24PM UTC by hallvors comment:10

Another potential hack/workaround would be rewriting window.getComputedStyle() - of course with the risk that it will now behave differently to what some other component on the page requires, so use with caution:

(function(gcs, gpv){
	window.getComputedStyle=function(){
		try{
			var result=gcs.apply(this, arguments);
		}catch(e){
			throw e;
		}
		var elm=arguments[0];
		if( /\\d*px/.test(result.top) && elm.style.top === ''  ||  /\\d*px/.test(result.left) && elm.style.left === '' ){
			result.getPropertyValue=function(name){
				var result=gpv.apply(this,arguments);
				if(name=='top' || name=='left')return 'auto';
				return result;
			}
		}
		return result;
	}
})(window.getComputedStyle, CSSStyleDeclaration.prototype.getPropertyValue)

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

milestone: 1.9.02.0.0

Changed October 29, 2012 05:37AM UTC by mikesherov comment:12

resolution: → worksforme
status: newclosed

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI. http://jsfiddle.net/Xb6VN/

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!