jquery / jquery/jquery-ui

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

Open
#2,255 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs info
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

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 */
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported layout with a .content element using container-type: inline-size and a jQuery UI sortable component inside it. Start at the sortable drag behavior and inspect how the displaced ghost element's position is calculated; done means dragging no longer jumps by the content element's document offset.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.