Opened 6 years ago

Closed 2 years ago

#7546 closed bug (fixed)

Sortable: scrolling sortables don't scroll in IE

Reported by: brettkiefer Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.sortable Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (13)

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

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

Last edited 5 years ago by subkamran (previous) (diff)

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

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

comment:4 Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:5 Changed 4 years ago by mikesherov

  • Status changed from new to open
  • Summary changed from scrolling sortables don't scroll in IE 9 to Sortable: scrolling sortables don't scroll in IE 9

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

comment:6 Changed 4 years ago by tj.vantoll

  • Summary changed from Sortable: scrolling sortables don't scroll in IE 9 to Sortable: scrolling sortables don't scroll in IE

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/

comment:7 Changed 4 years ago by tj.vantoll

#9121 is a duplicate of this ticket.

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

comment:9 Changed 4 years ago by tj.vantoll

#8553 is a duplicate of this ticket.

comment:10 Changed 4 years ago by 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?

Last edited 4 years ago by diptik (previous) (diff)

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

Last edited 3 years ago by barb (previous) (diff)

comment:12 Changed 2 years ago by 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/

comment:13 Changed 2 years ago by tj.vantoll

  • Milestone changed from 2.0.0 to 1.11.0
  • Resolution set to fixed
  • Status changed from open to closed

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

Note: See TracTickets for help on using tickets.