Sorting - adding left: top: css propertyes

[FDisk]

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

---

After

[paul]

Can you provide a reduced test case?

[FDisk]

You cant test it here ​http://jqueryui.com/demos/sortable/portlets.html[[BR]] Use integrated opera developer tools. [Tools > Advanced > Developer tools]
Drag some elements and check the style attribute. There is added (actually not removed) position attributes (top,left). Some times the main design depends on position:relative and the results are displayed wrong. The same problem sometimes appear in IE 8 browser to.
Sorry for bad English.

[Zajec]

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

[Zajec]

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.

[Zajec]

Minimal test-case for problem.

[Zajec]

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.

[Zajec]

Possible workaround:

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

[hallvors]

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)

[hallvors]

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)

[mikesherov]

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!