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.
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:
Toggle container sizehttps://codepen.io/ohnorichard/pen/wvwogYP