#6690 closed bug (notabug)

Opened November 23, 2010 07:14PM UTC

Closed November 30, 2010 09:19PM UTC

helper position error when HTML overflow is set

Reported by: acruikshank Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.sortable Version: 1.8.6
Keywords: Cc:
Blocked by: Blocking:
Description

If the document's HTML element is given an overflow and the sortable is contained in an element within the body, the sortable's helper will be mis-positioned if the drag is initiated after the page has been scrolled. I've tested this in FireFox. This doesn't seem to be a problem in Safari. This example demonstrates the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <style type="text/css" media="screen">
      html { overflow-y: auto; }
      #container { position: relative; }
      li { list-style-type: none; padding:.5em; height: 1em; width: 10em; background-color: #fff; border: 1px solid #ccc; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
        for (var i=0; i < 100; i++)
          $('#sortlist').append('<li>Item ' + (i+1) + '</li>')
        $('#sortlist').sortable();
      });
    </script>
  </head>
  <body>
    Scroll down and drag an item to see issue.
    <div id="container">
      <ul id="sortlist">
    </div>
  </body>
</html>

The issue seems to be with line 803 of jquery.ui.sortable.js:

		if(this.cssPosition == 'absolute' && this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) {

The scrollParent instance variable is set using the scrollParent function in ui.core which returns the HTML element rather than the document when an overflow position is set. There are other parts of the sortable code that compensate for this by checking if scrollParent is either document or has tagName == 'HTML'.

Attachments (0)
Change History (1)

Changed November 30, 2010 09:19PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

We don't support modifying the overflow or dimensioning of html or body.