search

metafizzy / packery

:bento: Gapless, draggable grid layouts
https://packery.metafizzy.co
4.13k stars 315 forks source link

Bootstrap Collapse, Draggabilly and Packery height issues on expand #525

Closed bokac91 closed 5 years ago

bokac91 commented 5 years ago

Hello there!

First of all - great library. It's really impressive! This is my issue: at the moment, I have a grid of items and I am using Draggabilly to move them around, and I am using some of the bootstrap's classes. Items (col-sm-4 grid-item) are basically cards with the heading and the body (panel-heading and panel-body). I tried to implement a collapsible card that, when clicked, would expand its height and reveal its content; however, when I do that, my card just expands above the card that is below it, instead of pushing the below's card down to make room for the collapsible one.

Is this issue solvable? I assume that I need to implement some sort of jQuery function, but I'm just not sure how. I've seen a similar issue with the hidden paragraph; however, my collapsible div is not literally hidden - it's just of tab-content class that is toggleable. Thanks!

desandro commented 5 years ago

Yes, you can solve this issue by using fit method. See more in Animating Item sizes

bokac91 commented 5 years ago

Okay, gotcha. Thanks!

masa333mekis commented 1 year ago

Okay, gotcha. Thanks! @bokac91 i have the same issue, can you please tell me how you fixed it - the collapse content to push bellow card down - because now i have $('.collapse').on('shown.bs.collapse', function(event) { var $item = $(event.target).closest('.grid-item'); $grid.packery('fit', $item[0]); }); - but it is not okey because it waits to be completely visible and then the other card fit or goes down - how can i change that? thank for help!