Can't get isotope to fill the whole width container

[camicase82]

Hi there, I'm trying to modify an existing isotope/bootstrap implementation to change the layout, originally, the gallery fill the whole screen as seen here:

https://constructionandrepair.com/#gallery

But when I change the layout separating the title and the gallery on different rows and the filter options and images on a different one, each one inside a col, isotope is only setting 2 cols when it should be 3 as I'm using col-md-4

I tried reducing the col size for the items to 3, and it shows 3 cols (which either makes much sense), and still not taking the whole width of the container

Here is a simple example of the isolated issue on a codePen https://codepen.io/camicase82-the-styleful/pen/ZExgRZg

The general structure is as follows, please keep in mind that the final code is generated inside a CMS (MODX)

 <div class="row">
      <!-- filter links -->
      <div class="newFiltering col-sm-3">
        <span class="full-width mb-35" data-filter='filterName'>filterName</span>
      </div>

      <div class="clearfix"></div>

      <!-- gallery -->
      <div class="newGallery text-center col-sm-9">
        <div class="grid-sizer"></div>
        <div class="row">
        <!-- This one repeats lots of times -->
        <div class="col-md-4 newItems filterName">
          <div class="item-img">
            <img src="[[+image]]" alt="image">
            <div class="item-img-overlay valign">
              <div class="overlay-info full-width vertical-center">
                <h6>[[+name]]</h6>
                <p>[[+body]]</p>
              </div>
              <a href="[[+image]]" class="popimg">
                <i class="icofont icofont-image"></i>
              </a>
            </div>
          </div>
          </div>
        </div>
        <div class="clear-fix"></div>

      </div>

    </div>

My current init code is as follows

 // isotope galerry 2
    $('.newGallery').isotope({
      // options
      itemSelector: '.newItems',
      layoutMode: 'fitRows',
      percentPosition: true,
      masonry: {
        // use element for option
        columnWidth: '.grid-sizer'
      }

    });

    var $newGallery = $('.newGallery').isotope({
      // options

    });

    // filter items on button click
    $('.newFiltering').on( 'click', 'span', function() {

        var filterValue = $(this).attr('data-filter');

        $newGallery.isotope({ filter: filterValue });

    });

    $('.newFiltering').on( 'click', 'span', function() {

        $(this).addClass('active').siblings().removeClass('active');

    });

The thing that got me scratching my head, is that it actually organizes the images as it should before isotope loads, I mean it shows 3 cols for a sec, then goes to 2

[thesublimeobject]

@camicase82 — I'm pretty sure the issue here is that you're wrapping that .row div around the items inside of the container. If that div is wrapped around the items (or perhaps even just sitting there), it's likely calculating row/column sizes using that instead of the items themselves, which is the desired functionality.

I did try taking a look at the example, but it didn't seem to really match the issue. If this isn't helpful, please follow up and I can try to further assist you. Thanks!

[camicase82]

Thanks a lot for answering, and just got it working, I forgot to fork it to leave the original issue visible but was related to what you are pointing out, basically the gallery selector needs to be at the same level as the other container of elements, and in the case of bootstrap, it should be a row and items cols

[thesublimeobject]

Glad I could help!