Container element resizing breaks dragging behaviour until window resize when using percentage widths
- Dominant language
- JavaScript
- Stars
- 4.3k
- Forks
- 324
- PR merge metrics
- No merged PRs in 30d
Description
I am using Packery with a layout that has a collapsible navigation side menu, which causes the content container to change size whenever the navigation is collapsed. If I collapse the navigation however, Packery appears to resize okay, however if you drag an element you can see that the underlying grid is displaced, and the elements try to fit into the previous size of the grid, not the current size. This is using percentage widths for the container and items (i.e. `percentPosition: true`).
The workaround I am using is to use a third party library to detect container size changes, however I am having to dispatch a window resize event for Packery/Outlayer to trigger the "proper" resize handling. If I call `.resize()` on a Packery instance manually, it doesn't solve the issue, I assume because Outlayer is where the logic resides, however I don't have direct access to the Outlayer instance.
Reduced test case below. To reproduce:
- Click `Toggle container size`
- Drag any element
- Resize window
- Drag any element
https://codepen.io/ohnorichard/pen/wvwogYP
Contributor guide
Research direction
Start with the reduced test case at https://codepen.io/ohnorichard/pen/wvwogYP and trace Packery's container resize and drag handling, especially the percentage-width path. Reproduce the listed toggle-and-drag sequence; done means dragging uses the current container size without requiring a window resize event.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100