Opened 10 years ago

Closed 6 years ago

#4792 closed bug (worksforme)

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

http://i28.tinypic.com/206mx77.png


After

http://i25.tinypic.com/k06cgj.png

Attachments (1)

sortable.html (1.4 KB) - added by Zajec 9 years ago.
Minimal test-case for problem.

Download all attachments as: .zip

Change History (13)

comment:1 Changed 10 years ago by paul

Can you provide a reduced test case?

comment:2 Changed 10 years ago by 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.

comment:3 Changed 9 years ago by Scott González

Milestone: TBD

comment:4 Changed 9 years ago by Scott González

Milestone: TBD1.8

comment:5 Changed 9 years ago by 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

comment:6 Changed 9 years ago by 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.

Changed 9 years ago by Zajec

Attachment: sortable.html added

Minimal test-case for problem.

comment:7 Changed 9 years ago by 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.

comment:8 Changed 9 years ago by Zajec

Possible workaround:

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

comment:9 Changed 8 years ago by 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)

comment:10 Changed 8 years ago by 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)

comment:11 Changed 6 years ago by Scott González

Milestone: 1.9.02.0.0

comment:12 Changed 6 years ago by mikesherov

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!

Note: See TracTickets for help on using tickets.