title: Force dom reload/resize in Javascript
body: <p>I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.</p>
  
  <pre><code> $('#sidebar-toggle').click(function(event) {
     event.preventDefault();
     $('body').toggleClass('with-sidebar-left');
   });
  </code></pre>
  
  <p><strong>Edit:</strong> Seems like it might be a Webkit issue. Works fine in Firefox.</p>
  
  <p><strong>Edit 2:</strong> Set up a simplified build at the following location:</p>
  
  <p><a href="https://dl.dropbox.com/u/189605/misc/build-test/grid.html" rel="nofollow">https://dl.dropbox.com/u/189605/misc/build-test/grid.html</a></p>
  
  <p>You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.</p>