I’ve been working a project using isotope and I must have changed something because it was displaying everything correctly, then I deployed it and it is adding all these extra spaces between the .article class. I don’t know what is causing this, but I’m starting to pull my hair out because I can’t see how to fix this. There are no elements between the articles in the container, but I am using twitter bootstrap and I’m wondering if the grid could be causing that or something? Below is the rendered page code (there’s a lot) but the articles div is what I call isotope on.
here is an example of the spacing issue:
EDIT
I removed a lot of the HTML to focus on the isotope container div. THANKS!
page:
EDIT 2
added isotope code:
I call it with these three at the bottom of my page:
//isotope
$("#articles").imagesLoaded(IsotopeLoad);
$(".sorter").click(IsotopeSort);
//isotope filtering
$("#filterBtns").children().click(OnFilterChange);
then here are those functions
function IsotopeLoad() {
$("#articles").isotope({
itemSelector: ".article",
getSortData: {
worn: function ($e) {
return $e.find(".lastWornOn").text();
},
purchased: function ($e) {
return $e.find(".purchasedOn").text();
}
}
});
}
function IsotopeSort() {
var sortByCode = $(this).parent().find(".sortBy").text();
var IsAsc = $(this).parent().find(".asc").text();
$("#articles").isotope({
sortBy: sortByCode,
sortAscending: IsAsc
});
}
function OnFilterChange() {
//check if first button is active
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
//get filter buttons
var filters = $("#filterBtns").children(".active");
var filterString = "";
//loop through buttons to get filter values in one string
$(filters).each(function (index, e) {
filterString = filterString + $(e).val() + ", ";
});
if (filterString.substring(filterString.length - 2) == ", ") {
filterString = filterString.substring(0, filterString.length - 2);
}
filterString = $.trim(filterString)
//apply isotope
$("#articles").isotope({
filter: filterString
});
}
page code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well">
<div class="btn-group pull-right">
<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Sort <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="sorter" id="byLastWornDesc">By Last Worn</a><span class="sortBy">worn</span><span class="asc">false</span></li>
<li><a href="#" class="sorter" id="byLastWornAsc">By First Worn</a><span class="sortBy">worn</span><span class="asc">true</span></li>
<li><a href="#" class="sorter" id="byPurchasedDesc">By Last Purchased</a><span class="sortBy">purchased</span><span class="asc">false</span></li>
<li><a href="#" class="sorter" id="byPurchasedAsc">By First Purchased</a><span class="sortBy">purchased</span><span class="asc">true</span></li>
</ul>
</div>
<div class="btn-group btn-group-vertical" id="filterBtns">
<button type="button" class="btn btn-mini" value=".BCBG">BCBG</button>
<button type="button" class="btn btn-mini" value=".Bebe">Bebe</button>
</div>
</div>
</div>
<div class="span10">
<div id="articles" style="position: relative; overflow: hidden; height: 750px;" class="isotope">
<div class="article Dress Sequin Black isotope-item" id="1" rel="tooltip" data-title="Dress Sequin Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
<img alt="1" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20sequin%20mini%20dress.jjpgthumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Sweater Tan isotope-item" id="2" rel="tooltip" data-title="Sweater Tan" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(161px, 0px, 0px);">
<img alt="2" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212114525152thumb.jpg">
<span class="hide purchasedOn">11/20/2012 12:00:00 AM</span> <span class="hide lastWornOn">11/29/2012 12:00:00 AM</span>
</div>
<div class="article Leggings Black isotope-item" id="4" rel="tooltip" data-title="Leggings Black" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(483px, 0px, 0px);">
<img alt="4" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115347827thumb.jpg">
<span class="hide purchasedOn">11/21/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span>
</div>
<div class="article Blue Sweater isotope-item" id="5" rel="tooltip" data-title="Blue Sweater" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(805px, 0px, 0px);">
<img alt="5" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115533282thumb.jpg">
<span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/1/2012 12:00:00 AM</span>
</div>
<div class="article Untagged isotope-item" id="6" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 0px, 0px);">
<img alt="6" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20dressthumb.jpg">
<span class="hide purchasedOn">12/2/2012 12:00:00 AM</span> <span class="hide lastWornOn">12/2/2012 12:00:00 AM</span>
</div>
<div class="article Untagged isotope-item" id="7" rel="tooltip" data-title="Untagged" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 250px, 0px);">
<img alt="7" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20lace%20dressthumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Black Lace Romper isotope-item" id="8" rel="tooltip" data-title="Black Lace Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 250px, 0px);">
<img alt="8" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20romperthumb.jpg">
<span class="hide purchasedOn">11/29/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span>
</div>
<div class="article White isotope-item" id="10" rel="tooltip" data-title="White" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 250px, 0px);">
<img alt="10" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212120238879thumb.jpg">
<span class="hide purchasedOn">11/22/2012 12:00:00 AM</span> <span class="hide lastWornOn"></span>
</div>
<div class="article Dress Green Sequin isotope-item" id="12" rel="tooltip" data-title="Dress Green Sequin" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(966px, 250px, 0px);">
<img alt="12" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0002athumb.jpg">
<span class="hide purchasedOn">12/1/2012 12:00:00 AM</span> <span class="hide lastWornOn">9/24/2012 12:00:00 AM</span>
</div>
<div class="article Black Gunmetal Metallic isotope-item" id="14" rel="tooltip" data-title="Black Gunmetal Metallic" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(1127px, 250px, 0px);">
<img alt="14" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/EMP1thumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn"></span>
</div>
<div class="article Floral Blue Shirt isotope-item" id="15" rel="tooltip" data-title="Floral Blue Shirt" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 500px, 0px);">
<img alt="15" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0309athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/5/2012 12:00:00 AM</span>
</div>
<div class="article White Pants Stripe isotope-item" id="16" rel="tooltip" data-title="White Pants Stripe" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(322px, 500px, 0px);">
<img alt="16" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0430athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">9/1/2012 12:00:00 AM</span>
</div>
<div class="article Red Romper isotope-item" id="17" rel="tooltip" data-title="Red Romper" data-original-title="" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(644px, 500px, 0px);">
<img alt="17" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0055athumb.jpg">
<span class="hide purchasedOn"></span> <span class="hide lastWornOn">7/3/2012 12:00:00 AM</span>
</div>
</div>
[1]: https://i.stack.imgur.com/QrtOS.jpg
You need to define a width for the columns.
Either use the option
masonryand set itscolumnWidthto something that fits an imageor give dimensions to the
.articleelements.This will help isotop to calculate the correct width for the columns ..