Skip to main content

Search and Top Navigation

#7546 closed bug (fixed)

Opened July 13, 2011 01:11PM UTC

Closed December 22, 2014 03:10PM UTC

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.

Attachments (0)
Change History (13)

Changed September 15, 2011 10:51AM UTC by skeptic35 comment:1

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

Changed October 03, 2011 08:37PM UTC by subkamran comment:2

_comment0: This is pretty important; it makes our page hard to use on IE (and since this is an intranet app, unfortunately we have to target it). Any monkey patch we can do to get it working right away?1317674368315418

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.

Changed September 06, 2012 12:39PM UTC by jheilgeist comment:3

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

Changed October 11, 2012 02:55PM UTC by scottgonzalez comment:4

milestone: 1.9.02.0.0

Changed October 29, 2012 05:00AM UTC by mikesherov comment:5

status: newopen
summary: scrolling sortables don't scroll in IE 9Sortable: scrolling sortables don't scroll in IE 9

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

Changed March 12, 2013 01:19AM UTC by tj.vantoll comment:6

summary: Sortable: scrolling sortables don't scroll in IE 9Sortable: 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/

Changed March 12, 2013 01:22AM UTC by tj.vantoll comment:7

#9121 is a duplicate of this ticket.

Changed March 21, 2013 05:13PM UTC by aphillips8 comment:8

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.

Changed March 23, 2013 02:10AM UTC by tj.vantoll comment:9

#8553 is a duplicate of this ticket.

Changed August 22, 2013 08:40AM UTC by diptik comment:10

_comment0: 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. Is there any solution for this issue?1377163609462384
_comment1: 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?1377164325046870

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?

Changed July 17, 2014 08:16AM UTC by barb comment:11

_comment0: 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; \ } \ }}} \ 1405669770002613

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.

Changed December 16, 2014 11:27PM UTC by niiru comment:12

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/

Changed December 22, 2014 03:10PM UTC by tj.vantoll comment:13

milestone: 2.0.01.11.0
resolution: → fixed
status: openclosed

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