Opened 10 years ago

Closed 7 years ago

#4926 closed bug (patcheswelcome)

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 10 years ago.
Demonstration of problem

Download all attachments as: .zip

Change History (5)

Changed 10 years ago by martyf

Attachment: example.htm added

Demonstration of problem

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:2 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:3 Changed 7 years ago by mikesherov

Status: newopen
Summary: Nested Sortable and Position Relative (IE6/IE7)Sortable: Nested Sortables disappear w/ Position Relative in IE7

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

comment:4 Changed 7 years ago by tj.vantoll

Resolution: patcheswelcome
Status: openclosed

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.

Note: See TracTickets for help on using tickets.