Opened 9 years ago

Closed 9 years ago

#6690 closed bug (notabug)

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

Change History (1)

comment:1 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

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

Note: See TracTickets for help on using tickets.