metafizzy / metafizzy/packery

Container element resizing breaks dragging behaviour until window resize when using percentage widths

Open
#532 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.