Sortable: scrolling sortables don't scroll in IE

[brettkiefer]

If I enclose a simple jquery.ui.scrollable in an overflow:auto div in Internet Explorer 9, then drag to the edge of the scrollable, it doesn't scroll.

Repro: ​http://jsfiddle.net/fVnKG/

This is the basic sortable demo (​http://jqueryui.com/demos/sortable/), but with a height and an overflow:auto applied to the demo div. If you open this JSFiddle in Chrome or Firefox, you get the expected scrolling behavior when you drag to the bottom edge of the list. In IE 9, the div does not scroll.

[skeptic35]

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...

[subkamran]

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.

[jheilgeist]

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

[mikesherov]

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

[tj.vantoll]

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/

[tj.vantoll]

#9121 is a duplicate of this ticket.

[aphillips8]

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.

[tj.vantoll]

#8553 is a duplicate of this ticket.

[diptik]

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?

[barb]

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.

[niiru]

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/

[tj.vantoll]

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