jquery / jquery-ui

The official jQuery user interface library.
https://jqueryui.com
Other
11.26k stars 5.32k forks source link

Sortable doesn't work inside of CSS container (container queries) #2255

Open blesa opened 5 months ago

blesa commented 5 months ago

In my project I use simple layout structure:

<div class="layout">
  <div class="sidebar">....menu....</div> <!-- cca 200px wide -->
  <div class="content">
    <div class="my-sortable-component-is-here">...</div>
  </div>
</div>

If I add container query CSS property "container-type: inline-size" to .content it breaks jQuery UI sortable behaviour. If I drag an item from the sortable div, the item immediately jumps some distance from the position of grab. The shift is probably the same distance as offset of div.content from the top left corner of the document. There is obviously a problem with calculation of position of dragged ghost element (displaced).

.content {
  container-type: inline-size;  /* This is problematic */
}
mgol commented 4 months ago

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?