Sortable: scrolling sortables don't scroll in IE

IE8 has the same problem.

Imho this is a bug in the scrollParent() function. For IE it returns the document, not the scrollable div, due to the fact that it tests the div's css position on /(relative|absolute|fixed)/, which doesn't apply in this case (position is static). I'm puzzled why it does that...

I was able to fix it by explicitly setting "position: relative" on the div. Thanks skeptic. It acts a bit weird but it seems to scroll at least.

I have the same problem with the most recent jQuery UI 1.8.23 and jQuery 1.8.0 in Chrome 21.0 and Firefox 15.

Testing with fixed jQuery UI and variable jQuery versions:

• scrolling works with jQuery UI 1.8.23 and jQuery 1.7.2 (http://jsfiddle.net/fVnKG/24/)
• scrolling doesn't work with jQuery UI 1.8.23 and jQuery 1.8.0 (http://jsfiddle.net/fVnKG/23/)
• scrolling doesn't work with jQuery UI 1.8.23 and jQuery 1.8.1 (http://jsfiddle.net/fVnKG/25/)

Testing with variable jQuery UI and fixed jQuery versions:

• scrolling doesn't work with jQuery UI 1.8.22 and jQuery 1.8.0
• drag'n'drop doesn't work at all with jQuery <= 1.8.21 and jQuery 1.8.0

confirmed on latest: http://jsfiddle.net/uVVqa/

I can recreate this in all versions of IE. Per the first comment, this is almost certainly caused by #9057.

Applying

position: relative

to the sortable indeed fixes this.

Before: http://jsfiddle.net/tj_vantoll/qXwgg/

After: http://jsfiddle.net/tj_vantoll/Mfzkw/

#9121 is a duplicate of this ticket.

This bug also occurs in IE7, IE8 and IE10.

Note -

 position: relative 

should be applied to the element which has

 overflow: auto 

and the fixed height. (i.e. If the sortable list is inside a scrollable div).

However - if

 position: relative 

is applied then dragging a sortable item to the bottom of the list causes it to continue beyond the bottom of the list even in browsers where it usually behaves fine. A possible solution would be to apply

 position: relative 

using conditional comments to only target IE, although IE10 doesn't support conditional comments.

#8553 is a duplicate of this ticket.

I am applying position: relative solution to make auto scroll work on IE browser. But becauze of that in case of connected list my list item is getting hided when I am dragging it from one list to another connected list. It becomes visible after dropping.Please find following jsfiddle link for replicating issue:

http://jsfiddle.net/dipti104/ckRu2/7/

If I remove position: relative from UL then dragging item to other list working fine but automatic scroll on IE browser not working.

http://jsfiddle.net/dipti104/ckRu2/8/

Is there any solution for this issue?

I had both draggables and sortables on my site that wouldn't scroll up or down the page.

I found that if I removed the below from my css then all works perfectly - even though it doesn't make sense.

html, body {
   overflow-x: hidden;
}

But of course removing this causes other issues.

It looks like this was fixed in 1.11.0 - I'd recommend closing it.

Updated fiddle working in IE9 for me: http://jsfiddle.net/fVnKG/153/

I had to fix this in an older version... the fix appears to be an improved implementation of scrollParent:

See this commit's version for the source: https://github.com/jquery/jquery-ui/blob/d6d15b455839aa3a75cbcc5df2d7fa41299b59a9/ui/core.js

$.fn.extend({
	scrollParent: function() {
		var position = this.css( "position" ),
			excludeStaticParent = position === "absolute",
			scrollParent = this.parents().filter( function() {
				var parent = $( this );
				if ( excludeStaticParent && parent.css( "position" ) === "static" ) {
					return false;
				}
				return (/(auto|scroll)/).test( parent.css( "overflow" ) + parent.css( "overflow-y" ) + parent.css( "overflow-x" ) );
			}).eq( 0 );

		return position === "fixed" || !scrollParent.length ? $( this[ 0 ].ownerDocument || document ) : scrollParent;
	}
});

Link to it not working with 1.9.1: http://jsfiddle.net/fVnKG/154/

Link to it working with 1.9.1 and the improved scrollParent: http://jsfiddle.net/fVnKG/155/

Thanks niiru! You're right, mikesherov fixed this in 1.11.0 with this commit: https://github.com/jquery/jquery-ui/commit/44b2180782df6ef3324789324fcf3f98b85784a0.