Databases
StackOverflow2013
Postsdbo
POjQuery Isotope is not aligning large width item in fitColumns layout mode
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Isotope is not aligning large width item in fitColumns layout mode
    text
    copied!<p>Im using Jquery Isotope </p> <p>i have one item width greater than other div. All items align well but the items are not aligning properly under large width element. </p> <p><a href="http://jsfiddle.net/S5vAG/1381/" rel="nofollow">http://jsfiddle.net/S5vAG/1381/</a></p> <pre><code>&lt;div id="container"&gt; &lt;div class="item"&gt;1&lt;/div&gt; &lt;div class="item large"&gt;2&lt;/div&gt; &lt;div class="item"&gt;3&lt;/div&gt; &lt;div class="item"&gt;4&lt;/div&gt; &lt;div class="item"&gt;5&lt;/div&gt; &lt;div class="item"&gt;6&lt;/div&gt; &lt;div class="item"&gt;7&lt;/div&gt; &lt;/div&gt; $(function(){ var $container = $('#container'), $items = $('.item'); $container.isotope({ itemSelector: '.item', layoutMode : 'fitColumns', resizesContainer : true, getSortData : { fitOrder : function( $item ) { var order, index = $item.index(); if ( $item.hasClass('large') &amp;&amp; index % 2 ) { order = index + 1.5; } else { order = index; } return order; } }, sortBy : 'fitOrder' }); $items.click(function(){ var $this = $(this); // nothing to change if this already has large class if ( $this.hasClass('large') ) { return; } var $previousLargeItem = $items.filter('.large'); $previousLargeItem.removeClass('large'); $this.addClass('large'); $container // update sort data on changed items .isotope('updateSortData', $this ) .isotope('updateSortData', $previousLargeItem ) // trigger layout and sort .isotope(); }); }); </code></pre> <p>Can someone please explain why this happening or please provide me a better solution.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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