#4926 closed bug (patcheswelcome)

Opened October 26, 2009 09:45PM UTC

Closed February 09, 2013 03:00AM UTC

Sortable: Nested Sortables disappear w/ Position Relative in IE7

Reported by: martyf Owned by:
Priority: major Milestone: 2.0.0
Component: ui.sortable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

IE6 and IE7 do not behave correctly when using nested sortables, such as an unordered list (ul) where the parent list item (li) has a position relative, and the child nested list (ul) has position absolute.

In the attached example, if you drag Parent 2 in IE6/IE7, the nested list disappears.

If you remove "position: relative" from the li style definition, the issue disappears, however you're limited with formatting as the alignment of the nested list is thrown out.

A similar effect happens with float.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">

 	ul {
		position:relative;
	}
	
	ul, li {
		margin:0;
		padding:0;
		list-style:none;
	}
	
	li {
		width:200px;
		margin:1px;
		padding:5px;
		border:solid 1px #AAA;
		background-color:#EEE;
		
		position:relative;
	}
	
	ul li ul {
		position:absolute;
		top:-1px;
		left:212px;
		padding-left:1px;
	}
	
	.ph {
		background-color:#CCC;
	}
	
</style>
<script type="text/javascript">
	$(function() {
				
		$(".sortable").sortable({
			forcePlaceholderSize: true,
			placeholder: 'ph',
			opacity: 0.8,
			items: 'li.menu-item'
		});
		$(".sortable").disableSelection();

	});
	</script>
<ul class="sortable">
  <li class="menu-item"> Parent 1 </li>
  <li class="menu-item"> Parent 2
    <ul>
      <li class="menu-item"> Sub </li>
      <li class="menu-item"> Sub 2 </li>
    </ul>
  </li>
</ul>
</body>
</html>

This is in both 1.7.2 and 1.8a1

A workaround (at least for the moment) is to:

1. remove "position: relative"

2. add "position: relative" to the upper-most parent ul style

3. on the "stop" event of the sortable, use the jQuery position() to determine the top value, and then set this to be the absolute position of the child ul

Visually, it will line up, but is an additional workaround.

Attachments (1)
  • example.htm (1.4 KB) - added by martyf October 26, 2009 09:45PM UTC.

    Demonstration of problem

Change History (4)

Changed November 18, 2009 10:13AM UTC by jzaefferer comment:1

milestone: TBD → 1.8

Changed October 11, 2012 02:54PM UTC by scottgonzalez comment:2

milestone: 1.9.0 → 2.0.0

Changed November 06, 2012 01:31AM UTC by mikesherov comment:3

status: new → open
summary: Nested Sortable and Position Relative (IE6/IE7) → Sortable: Nested Sortables disappear w/ Position Relative in IE7

Confirmed on latest: http://jsfiddle.net/Dpusg/

Changed February 09, 2013 03:00AM UTC by tj.vantoll comment:4

resolution: → patcheswelcome
status: open → closed

At this point, we're not going to invest any more time into searching for a workaround that we're comfortable implementing. If anyone has a proposed fix, we'll gladly review a pull request.