Opened 9 years ago

Closed 9 years ago

Last modified 7 years ago

#3052 closed bug (fixed)

UI Sortables IE issue with CSS overflow property

Reported by: anonymous Owned by: paul
Priority: major Milestone:
Component: ui.sortable Version: 1.5.1
Keywords: ui, sortables, css overflow, ie Cc: vance@…
Blocked by: Blocking:


For some reason, there appears to be an issue when viewing a sortable list inside a DIV with "overflow: scroll" in internet explorer.

This issue was discovered when attempting to use a sortable list within a fixed-height modal window. The list will scroll inside the modal window in IE fine until the sortable() function is called. After the sortable() function is called in IE, the list appears to rise above and outside the containment box, and the user can no longer scroll down to the items towards the bottom of the list.

In IE, use the "Sortable ON/OFF" button to toggle sortability and launch the modal window to see the bug in action:

Change History (5)

comment:1 Changed 9 years ago by paul

Can you maybe upload a test case as attachment? I cannot find out what's causing this right now.

comment:2 Changed 9 years ago by paul

  • Milestone 1.5.2 deleted

comment:3 Changed 9 years ago by vlucas

I setup a very basic example at that link - Just click the button to turn sortables ON/OFF. If they are ON in IE and you launch the modal window, the DIV with overflow will not scroll the list - the list seems to rise above and outside the containing element. Close the modal and turn the sortables back OFF and launch the modal window again. The list will now scroll and behave as expected in IE.

I'm not sure what more I can do to illustrate the problem?

comment:4 Changed 9 years ago by paul

  • Component changed from ui.core to ui.sortable

comment:5 Changed 9 years ago by paul

  • Resolution set to fixed
  • Status changed from new to closed

I think it's fixed in r494.

Please use jsFiddle or jsbin to provide test cases instead of pasting large blocks of code in the ticket.

If you have a fix, fork the repository on GitHub and send a pull request. Make sure to check out the guide for writing code for jQuery projects.

Modify Ticket

Change Properties

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.