title: JS fadeIn & BootStrap | issue auto calculate left % margin
body: <p>First, have a look there and click on the switch (Incoming/Right Now): <a href="https://ilovesubiaco.com.au/events-search/" rel="nofollow noreferrer">https://ilovesubiaco.com.au/events-search/</a></p>
  
  <p>As you can see my switch is working, but on my "Right Now" events, <strong>my Tiles are stacking up on each other</strong>. </p>
  
  <p>The reason is that my elements.style for the main div of each (<em>col-lg-3 col-sm-4 col-xs-12 masonery_item event-now-tile</em>) is not calculating the left properly as it should, probably because my tiles are not displayed when my html is loaded.</p>
  
  <p>I ran some test trying to remove the first "fadeOut(0)" to see if I could tweak it. 
  In that case, my tiles have the right % left per element but the issue is that my tiles are still taking up white space after display none.</p>
  
  <p>I also tried to reload my div with the JS ".load" but it doesn't look good so I may not know how to use it properly.</p>
  
  <p><strong>How do I force the BootStrap library to recalculate my div Left:%; space when I switch for the first time?</strong></p>
  
  <p><strong>Here is my JS:</strong></p>
  
  <pre><code>jQuery(document).ready(function(){
              $(".event-now-tile").fadeOut(0);
      $('#event-inc-now-switch').on('switchChange.bootstrapSwitch', function (e, data) {
           var state=$(this).bootstrapSwitch('state');//returns true or false
           if(state){
              $(".event-now-tile").fadeOut(500);
              $(".event-inc-tile").fadeIn(500);
           }else{
              $(".event-inc-tile").fadeOut(500);
              $(".event-now-tile").fadeIn(500);
           }
       });
  });
  </code></pre>
  
  <p>Thanks !!</p>