Databases
StackOverflow2013
Postsdbo
POjQuery UI Sortable and Bootstrap 3 fluid grid flickering and breaking
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Sortable and Bootstrap 3 fluid grid flickering and breaking
    text
    copied!<p>I have a basic 3 x 3 grid layout based on Bootstrap 3. I need it to be fluid, hence I have left out the 'container' class. I need the columns inside the row to be sortable using jquery ui sortable functionality.</p> <p>Everything works fine, but the last column of each row behaves wierdly when dragged. The design breaks on clicking any of the last columns.</p> <p>I have tried the solution of setting the placeholders margin to 0 but I can't seem to make it work. </p> <p>Any help would be greatly appreciated! Thanks!</p> <p><a href="http://jsfiddle.net/ishan_naithani/WwFuS/28/" rel="nofollow">JSFiddle</a></p> <pre><code>&lt;div class = 'row'&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class = 'row'&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class = 'row'&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class = 'col-xs-4'&gt; &lt;h2&gt;Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt; &lt;p&gt;&lt;a href="#" class="btn"&gt;View details »&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; $('.row').sortable({ connectWith: '.row', placeholder: 'placeholder' }); &lt;/script&gt; &lt;style&gt; .placeholder {margin-left: 0 !important; border: 1px solid #ccc} &lt;/style&gt; </code></pre>
 

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