Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
blesa opened this issue May 23, 2024 · 1 comment
Open

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

blesa opened this issue May 23, 2024 · 1 comment

Comments

@blesa
Copy link

blesa commented May 23, 2024

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
Copy link
Member

mgol commented May 29, 2024

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?

# for free to join this conversation on GitHub. Already have an account? # to comment
Development

No branches or pull requests

2 participants