title: Jquery UI .draggable and Chrome
body: <p>I was playing with JqueryUI and I encountered this issue when opening the page in chrome.</p>
  
  <p>Here is the HTML for the page</p>
  
  <pre><code>&lt;div class="main"&gt;
          &lt;div class="container"&gt;
              &lt;div class="jqui"&gt;
                  &lt;div class="contentTitle"&gt;
                      &lt;h1&gt;Playground&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div class="content"&gt;
                      &lt;div id="draggable" class="ui-widget-content colored"&gt;1                            
                      &lt;/div&gt;
                      &lt;div id="draggable1" class="ui-widget-content colored"&gt;2                            
                      &lt;/div&gt;
                      &lt;div class="dragcontainer"&gt;
                          &lt;div id="draggable2" class="ui-widget-content colored"&gt;3
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;&lt;!--jqui End--&gt;  
          &lt;/div&gt;&lt;!--Container End--&gt;                      
      &lt;/div&gt;&lt;!--Main End--&gt;
  </code></pre>
  
  <p>You can find the Complete code <a href="http://codepen.io/SurajVerma/pen/fxKcD" rel="nofollow">here</a></p>
  
  <p>In Firefox the draggable box in the pink background container is working all fine but when I am opening in Chrome, it is dragging only upside down and it seems it is taking width of the box as the width of the container.. Am I doing anything wrong here ? I appreciate any help.</p>
  
  <p>Thanks.</p>