CODEWITHSUNDEEP
jquerycssbootstrap-4cycle2
Taylor Bingham
Taylor Bingham

Reputation: 63

Bootstrap 4 - Need Collapse to Adjust Masonry Layout

Solution:

Solved swapping Cycle2 for a similar slideshow script that's responsive.

Slick

jsfiddle

     (function($) {

  var $carousel = $('.carousel'),
            $masonry    = $('#cards');

    $carousel.on('afterChange', function(slick){

        $masonry.masonry({
            itemSelector: '.card-item'
        }).on('shown.bs.collapse hidden.bs.collapse', function() {
            $masonry.masonry();
        });

    }).slick({
        arrows: false,
        speed: 0,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 400
    });

})(jQuery);

Original Question:

I have taken the card-column "masonry" from bootstrap 4 and adapted it to work with masonry js - they only supported B3 from what I could find - minus the gutters.

I'm putting in a collapse link and that's where the issue is. I can't get the grid-item to push it's container down, which would reformat the masonry layout - I think I worded that correctly.

It currently shows and hides fine, but the layout remains the same so it ends up showing under other elements instead of keeping the masonry layout.

Stripped all my solutions out so the fiddle is purely layout out this point.

jsfiddle here

I feel like it should involve the following, but no luck. :[

$grid.on('shown.bs.collapse', function() {
  $grid.masonry('layout');
});

Essentially, when the collapse is open, keep layout in tact, but I can't translate it to the code properly.

Another attempt was to merge bootstrap events with the masonry layout. I couldn't get it to work, though.

$('.collapsing').on('show.bs.collapse', function () {
  // do something…
  $grid.masonry('layout');
});

Fiddle has both of these included.

I think I need something that reads more like

  1. What is the container size at closed
  2. What is it at open
  3. Change layout to size at open

Not sure how to write the code for it. :/

Upvotes: 2

Views: 1829

Answers (1)

joshmoto
joshmoto

Reputation: 5088

Try this .on method

(function ($) {

    var $masonry = $('#cards');
    $masonry.masonry({
        itemSelector: '.card-item'
    }).on('shown.bs.collapse hidden.bs.collapse', function() {
        $masonry.masonry();
    });

})(jQuery);

See working fiddle https://jsfiddle.net/joshmoto/ax1d7ok6/

The only issue with this is that masonry will never naturally animate with the bootstrap collapse method, masonry will only fire once the bootstrap collapse is complete. Bummer I know :-(

Upvotes: 1

Related Questions