Databases
StackOverflow2013
Postsdbo
POjquery isotope extra spaces
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery isotope extra spaces
    primarykey
    data
    text
    <p>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. </p> <p>here is an example of the spacing issue:</p> <p><img src="https://i.stack.imgur.com/UWY8U.jpg" alt="http://i.imgur.com/3yw9r.jpg"></p> <p><strong>EDIT</strong></p> <p>I removed a lot of the HTML to focus on the isotope container div. THANKS! page:</p> <p><strong>EDIT 2</strong></p> <p>added isotope code:</p> <p>I call it with these three at the bottom of my page:</p> <pre><code>//isotope $("#articles").imagesLoaded(IsotopeLoad); $(".sorter").click(IsotopeSort); //isotope filtering $("#filterBtns").children().click(OnFilterChange); </code></pre> <p>then here are those functions</p> <pre><code>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 }); } </code></pre> <p>page code:</p> <pre><code>&lt;div class="container-fluid"&gt; &lt;div class="row-fluid"&gt; &lt;div class="span2"&gt; &lt;div class="well"&gt; &lt;div class="btn-group pull-right"&gt; &lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Sort &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#" class="sorter" id="byLastWornDesc"&gt;By Last Worn&lt;/a&gt;&lt;span class="sortBy"&gt;worn&lt;/span&gt;&lt;span class="asc"&gt;false&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="sorter" id="byLastWornAsc"&gt;By First Worn&lt;/a&gt;&lt;span class="sortBy"&gt;worn&lt;/span&gt;&lt;span class="asc"&gt;true&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="sorter" id="byPurchasedDesc"&gt;By Last Purchased&lt;/a&gt;&lt;span class="sortBy"&gt;purchased&lt;/span&gt;&lt;span class="asc"&gt;false&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="sorter" id="byPurchasedAsc"&gt;By First Purchased&lt;/a&gt;&lt;span class="sortBy"&gt;purchased&lt;/span&gt;&lt;span class="asc"&gt;true&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="btn-group btn-group-vertical" id="filterBtns"&gt; &lt;button type="button" class="btn btn-mini" value=".BCBG"&gt;BCBG&lt;/button&gt; &lt;button type="button" class="btn btn-mini" value=".Bebe"&gt;Bebe&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="span10"&gt; &lt;div id="articles" style="position: relative; overflow: hidden; height: 750px;" class="isotope"&gt; &lt;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);"&gt; &lt;img alt="1" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20sequin%20mini%20dress.jjpgthumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="2" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212114525152thumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;11/20/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;11/29/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="4" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115347827thumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;11/21/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;12/2/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="5" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212115533282thumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;12/1/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;12/1/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="6" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20dressthumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;12/2/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;12/2/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="7" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20lace%20dressthumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="8" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/Black%20and%20Tan%20romperthumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;11/29/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="10" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/bcbg.imageg.net120212120238879thumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;11/22/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="12" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0002athumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;12/1/2012 12:00:00 AM&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;9/24/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="14" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/EMP1thumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="15" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0309athumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;9/5/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="16" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0430athumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;9/1/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;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);"&gt; &lt;img alt="17" src="http://e3da8dc1c3cfdf394995-184e01705dd318c162d0284c163588ca.r86.cf1.rackcdn.com/DSC_0055athumb.jpg"&gt; &lt;span class="hide purchasedOn"&gt;&lt;/span&gt; &lt;span class="hide lastWornOn"&gt;7/3/2012 12:00:00 AM&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; [1]: http://i.stack.imgur.com/QrtOS.jpg </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser576838
    1. USuser576838
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery isotope extra spaces
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POjquery isotope extra spaces
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHeard of version control? I don't know anyone who would be willing to trawl through all that code...
      singulars
      1. POjquery isotope extra spaces
      1. USahren
    2. COYeah, i figured. Well, I'm doing this as a quick one, but I really appreciate the condescending comment.
      singulars
      1. POjquery isotope extra spaces
      1. USuser576838
    3. COIf you post the javascript for isotope, i can probably tell you what the issue is.
      singulars
      1. POjquery isotope extra spaces
      1. USBentOnCoding
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload