Dashing Widget sizex Problem

1. summary

When playing around with dashing, I wanted to create a dashboard with 
several small tiles as the base size for the gridster, and then set up 
larger tiles for larger pieces of content. In doing so I discovered that 
if I set the data-sizex larger than 6 on one of my tiles, its layout 
becomes totally borked.

For an example, please see this screenshot: http://i.imgur.com/Qfpgl8N.png 
this screenshot is in Firefox (current stable) but also occurs all other 
current stable browsers (except of course IE since IE does not work at all).

In this shot, A11 is set to data-sizex=7 and you can see it runs much 
farther than the rest of the grid, overlapping the elements in the same 
row that come after it. B09 is sizex=6, C16 is sizex=5 and D14 (which you 
cannot see the label for) runs off the edge as well as it is also sizex=7.

My base dimension config is:

Dashing.widget_base_dimensions = [60, 60]
Dashing.numColumns = 20

and the only default style override I do is:

.widget { padding: 5px; }

The widgets I am using (Tile instead of Text) is included below, but it 
is just a copy of the Text widget without header tags, just a p tag for 
the data-bind to not have any extra padding/margins on its content. I have 
included the entirety of my dashboard below as well for reference.

I am able to recreate this using a brand new dashing project (with gem 
version 1.3.2) and just adding the tile widget as below and the tiles 
dashboard.

2. widgets_tile

tile.coffee:

    class Dashing.Tile extends Dashing.Widget
    
tile.html:

    <p data-bind="text"></p>

tile.scss:

    // ----------------------------------------------------------------------------
    // Sass declarations
    // ----------------------------------------------------------------------------
    $background-color:  #ec663c;
    $text-color:        rgba(255, 255, 255, 0.7);

    // ----------------------------------------------------------------------------
    // Widget-tile styles
    // ----------------------------------------------------------------------------
    .widget-tile {
      background-color: $background-color;
      color:            $text-color;
    }

3. dashboards_tiles.erb

<% content_for :title do %>Tile Dashboard<% end %>

<style type="text/css">
.widget { padding: 5px; }
</style>


<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.widget_base_dimensions = [60, 60]
  Dashing.numColumns = 20
});
</script>

<div class="gridster">
  <ul>

  <!-- row 1 -->
    <li data-row="1" data-col="1" data-sizex="3" data-sizey="3"><!-- <div data-id="A01" data-view="Tile" data-text="A01"></div> -->
      <div data-id="A01" data-view="Text" data-title="Text Box" data-text="A01"></div>
    </li>
    <!-- 
    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><div data-id="A02" data-view="Tile" data-text="A02"></div></li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><div data-id="A03" data-view="Tile" data-text="A03"></div></li>
    -->
    <li data-row="1" data-col="4" data-sizex="4" data-sizey="3"><!-- <div data-id="A04" data-view="Tile" data-text="A04"></div> -->
      <div data-id="A04" data-view="Clock" style="background-color: #8f5316;"></div>
      <i class="icon-time icon-background" style="font-size: 150px; margin-top: 25px;"></i>
    </li>
    <!--
    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"><div data-id="A05" data-view="Tile" data-text="A05"></div></li>
    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"><div data-id="A06" data-view="Tile" data-text="A06"></div></li>
    <li data-row="1" data-col="7" data-sizex="1" data-sizey="1"><div data-id="A07" data-view="Tile" data-text="A07"></div></li>
    -->
    <li data-row="1" data-col="8" data-sizex="1" data-sizey="1"><div data-id="A08" data-view="Tile" data-text="A08"></div></li>
    <li data-row="1" data-col="9" data-sizex="1" data-sizey="1"><div data-id="A09" data-view="Tile" data-text="A09"></div></li>
    <li data-row="1" data-col="10" data-sizex="1" data-sizey="1"><div data-id="A10" data-view="Tile" data-text="A10"></div></li>
    <li data-row="1" data-col="11" data-sizex="7" data-sizey="1"><div data-id="A11" data-view="Tile" data-text="A11"></div></li>
    <!--
    <li data-row="1" data-col="12" data-sizex="1" data-sizey="1"><div data-id="A12" data-view="Tile" data-text="A12"></div></li>
    <li data-row="1" data-col="13" data-sizex="1" data-sizey="1"><div data-id="A13" data-view="Tile" data-text="A13"></div></li>
    <li data-row="1" data-col="14" data-sizex="1" data-sizey="1"><div data-id="A14" data-view="Tile" data-text="A14"></div></li>
    <li data-row="1" data-col="15" data-sizex="1" data-sizey="1"><div data-id="A15" data-view="Tile" data-text="A15"></div></li>
    <li data-row="1" data-col="16" data-sizex="1" data-sizey="1"><div data-id="A16" data-view="Tile" data-text="A16"></div></li>
    <li data-row="1" data-col="17" data-sizex="1" data-sizey="1"><div data-id="A17" data-view="Tile" data-text="A17"></div></li>
    -->
    <li data-row="1" data-col="18" data-sizex="1" data-sizey="1"><div data-id="A18" data-view="Tile" data-text="A18"></div></li>
    <li data-row="1" data-col="19" data-sizex="1" data-sizey="1"><div data-id="A19" data-view="Tile" data-text="A19"></div></li>
    <li data-row="1" data-col="20" data-sizex="1" data-sizey="1"><div data-id="A20" data-view="Tile" data-text="A20"></div></li>
    
  <!-- row 2 -->
    <!-- 
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><div data-id="B01" data-view="Tile" data-text="B01"></div></li>
    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><div data-id="B02" data-view="Tile" data-text="B02"></div></li> 
    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><div data-id="B03" data-view="Tile" data-text="B03"></div></li>
    <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"><div data-id="B04" data-view="Tile" data-text="B04"></div></li>
    <li data-row="2" data-col="5" data-sizex="1" data-sizey="1"><div data-id="B05" data-view="Tile" data-text="B05"></div></li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="1"><div data-id="B06" data-view="Tile" data-text="B06"></div></li>
    <li data-row="2" data-col="7" data-sizex="1" data-sizey="1"><div data-id="B07" data-view="Tile" data-text="B07"></div></li>
    -->
    <li data-row="2" data-col="8" data-sizex="1" data-sizey="1"><div data-id="B08" data-view="Tile" data-text="B08"></div></li>
    <li data-row="2" data-col="9" data-sizex="6" data-sizey="1"><div data-id="B09" data-view="Tile" data-text="B09"></div></li>
    <!--
    <li data-row="2" data-col="10" data-sizex="1" data-sizey="1"><div data-id="B10" data-view="Tile" data-text="B10"></div></li>
    <li data-row="2" data-col="11" data-sizex="1" data-sizey="1"><div data-id="B11" data-view="Tile" data-text="B11"></div></li>
    <li data-row="2" data-col="12" data-sizex="1" data-sizey="1"><div data-id="B12" data-view="Tile" data-text="B12"></div></li>
    <li data-row="2" data-col="13" data-sizex="1" data-sizey="1"><div data-id="B13" data-view="Tile" data-text="B13"></div></li>
    <li data-row="2" data-col="14" data-sizex="1" data-sizey="1"><div data-id="B14" data-view="Tile" data-text="B14"></div></li>
    -->
    <li data-row="2" data-col="15" data-sizex="1" data-sizey="1"><div data-id="B15" data-view="Tile" data-text="B15"></div></li>
    <li data-row="2" data-col="16" data-sizex="1" data-sizey="1"><div data-id="B16" data-view="Tile" data-text="B16"></div></li>
    <li data-row="2" data-col="17" data-sizex="1" data-sizey="1"><div data-id="B17" data-view="Tile" data-text="B17"></div></li>
    <li data-row="2" data-col="18" data-sizex="1" data-sizey="1"><div data-id="B18" data-view="Tile" data-text="B18"></div></li>
    <li data-row="2" data-col="19" data-sizex="1" data-sizey="1"><div data-id="B19" data-view="Tile" data-text="B19"></div></li>
    <li data-row="2" data-col="20" data-sizex="1" data-sizey="1"><div data-id="B20" data-view="Tile" data-text="B20"></div></li>
    
  <!-- row 3 -->
    <!--
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><div data-id="C01" data-view="Tile" data-text="C01"></div></li>
    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><div data-id="C02" data-view="Tile" data-text="C02"></div></li>
    <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><div data-id="C03" data-view="Tile" data-text="C03"></div></li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><div data-id="C04" data-view="Tile" data-text="C04"></div></li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"><div data-id="C05" data-view="Tile" data-text="C05"></div></li>
    <li data-row="3" data-col="6" data-sizex="1" data-sizey="1"><div data-id="C06" data-view="Tile" data-text="C06"></div></li>
    <li data-row="3" data-col="7" data-sizex="1" data-sizey="1"><div data-id="C07" data-view="Tile" data-text="C07"></div></li>
    -->
    <li data-row="3" data-col="8" data-sizex="1" data-sizey="1"><div data-id="C08" data-view="Tile" data-text="C08"></div></li>
    <li data-row="3" data-col="9" data-sizex="1" data-sizey="1"><div data-id="C09" data-view="Tile" data-text="C09"></div></li>
    <li data-row="3" data-col="10" data-sizex="1" data-sizey="1"><div data-id="C10" data-view="Tile" data-text="C10"></div></li>
    <li data-row="3" data-col="11" data-sizex="1" data-sizey="1"><div data-id="C11" data-view="Tile" data-text="C11"></div></li>
    <li data-row="3" data-col="12" data-sizex="1" data-sizey="1"><div data-id="C12" data-view="Tile" data-text="C12"></div></li>
    <li data-row="3" data-col="13" data-sizex="1" data-sizey="1"><div data-id="C13" data-view="Tile" data-text="C13"></div></li>
    <li data-row="3" data-col="14" data-sizex="1" data-sizey="1"><div data-id="C14" data-view="Tile" data-text="C14"></div></li>
    <li data-row="3" data-col="15" data-sizex="1" data-sizey="1"><div data-id="C15" data-view="Tile" data-text="C15"></div></li>
    <li data-row="3" data-col="16" data-sizex="5" data-sizey="1"><div data-id="C16" data-view="Tile" data-text="C16"></div></li>
    <!--
    <li data-row="3" data-col="17" data-sizex="1" data-sizey="1"><div data-id="C17" data-view="Tile" data-text="C17"></div></li>
    <li data-row="3" data-col="18" data-sizex="1" data-sizey="1"><div data-id="C18" data-view="Tile" data-text="C18"></div></li>
    <li data-row="3" data-col="19" data-sizex="1" data-sizey="1"><div data-id="C19" data-view="Tile" data-text="C19"></div></li>
    <li data-row="3" data-col="20" data-sizex="1" data-sizey="1"><div data-id="C20" data-view="Tile" data-text="C20"></div></li>
    -->
    
  <!-- row 4 -->
    <li data-row="4" data-col="1" data-sizex="1" data-sizey="1"><div data-id="D01" data-view="Tile" data-text="D01"></div></li>
    <li data-row="4" data-col="2" data-sizex="1" data-sizey="1"><div data-id="D02" data-view="Tile" data-text="D02"></div></li>
    <li data-row="4" data-col="3" data-sizex="1" data-sizey="1"><div data-id="D03" data-view="Tile" data-text="D03"></div></li>
    <li data-row="4" data-col="4" data-sizex="1" data-sizey="1"><div data-id="D04" data-view="Tile" data-text="D04"></div></li>
    <li data-row="4" data-col="5" data-sizex="1" data-sizey="1"><div data-id="D05" data-view="Tile" data-text="D05"></div></li>
    <li data-row="4" data-col="6" data-sizex="1" data-sizey="1"><div data-id="D06" data-view="Tile" data-text="D06"></div></li>
    <li data-row="4" data-col="7" data-sizex="1" data-sizey="1"><div data-id="D07" data-view="Tile" data-text="D07"></div></li>
    <li data-row="4" data-col="8" data-sizex="1" data-sizey="1"><div data-id="D08" data-view="Tile" data-text="D08"></div></li>
    <li data-row="4" data-col="9" data-sizex="1" data-sizey="1"><div data-id="D09" data-view="Tile" data-text="D09"></div></li>
    <li data-row="4" data-col="10" data-sizex="1" data-sizey="1"><div data-id="D10" data-view="Tile" data-text="D10"></div></li>
    <li data-row="4" data-col="11" data-sizex="1" data-sizey="1"><div data-id="D11" data-view="Tile" data-text="D11"></div></li>
    <li data-row="4" data-col="12" data-sizex="1" data-sizey="1"><div data-id="D12" data-view="Tile" data-text="D12"></div></li>
    <li data-row="4" data-col="13" data-sizex="1" data-sizey="1"><div data-id="D13" data-view="Tile" data-text="D13"></div></li>
    <li data-row="4" data-col="14" data-sizex="7" data-sizey="1"><div data-id="D14" data-view="Tile" data-text="D14"></div></li>
    <!--
    <li data-row="4" data-col="15" data-sizex="1" data-sizey="1"><div data-id="D15" data-view="Tile" data-text="D15"></div></li>
    <li data-row="4" data-col="16" data-sizex="1" data-sizey="1"><div data-id="D16" data-view="Tile" data-text="D16"></div></li>
    <li data-row="4" data-col="17" data-sizex="1" data-sizey="1"><div data-id="D17" data-view="Tile" data-text="D17"></div></li>
    <li data-row="4" data-col="18" data-sizex="1" data-sizey="1"><div data-id="D18" data-view="Tile" data-text="D18"></div></li>
    <li data-row="4" data-col="19" data-sizex="1" data-sizey="1"><div data-id="D19" data-view="Tile" data-text="D19"></div></li>
    <li data-row="4" data-col="20" data-sizex="1" data-sizey="1"><div data-id="D30" data-view="Tile" data-text="D30"></div></li>
    -->
  
  <!-- row 5 -->
    <li data-row="5" data-col="1" data-sizex="1" data-sizey="1"><div data-id="E01" data-view="Tile" data-text="E01"></div></li>
    <li data-row="5" data-col="2" data-sizex="1" data-sizey="1"><div data-id="E02" data-view="Tile" data-text="E02"></div></li>
    <li data-row="5" data-col="3" data-sizex="1" data-sizey="1"><div data-id="E03" data-view="Tile" data-text="E03"></div></li>
    <li data-row="5" data-col="4" data-sizex="1" data-sizey="1"><div data-id="E04" data-view="Tile" data-text="E04"></div></li>
    <li data-row="5" data-col="5" data-sizex="1" data-sizey="1"><div data-id="E05" data-view="Tile" data-text="E05"></div></li>
    <li data-row="5" data-col="6" data-sizex="1" data-sizey="1"><div data-id="E06" data-view="Tile" data-text="E06"></div></li>
    <li data-row="5" data-col="7" data-sizex="1" data-sizey="1"><div data-id="E07" data-view="Tile" data-text="E07"></div></li>
    <li data-row="5" data-col="8" data-sizex="1" data-sizey="1"><div data-id="E08" data-view="Tile" data-text="E08"></div></li>
    <li data-row="5" data-col="9" data-sizex="1" data-sizey="1"><div data-id="E09" data-view="Tile" data-text="E09"></div></li>
    <li data-row="5" data-col="10" data-sizex="1" data-sizey="1"><div data-id="E10" data-view="Tile" data-text="E10"></div></li>
    <li data-row="5" data-col="11" data-sizex="1" data-sizey="1"><div data-id="E11" data-view="Tile" data-text="E11"></div></li>
    <li data-row="5" data-col="12" data-sizex="1" data-sizey="1"><div data-id="E12" data-view="Tile" data-text="E12"></div></li>
    <li data-row="5" data-col="13" data-sizex="1" data-sizey="1"><div data-id="E13" data-view="Tile" data-text="E13"></div></li>
    <li data-row="5" data-col="14" data-sizex="1" data-sizey="1"><div data-id="E14" data-view="Tile" data-text="E14"></div></li>
    <li data-row="5" data-col="15" data-sizex="1" data-sizey="1"><div data-id="E15" data-view="Tile" data-text="E15"></div></li>
    <li data-row="5" data-col="16" data-sizex="1" data-sizey="1"><div data-id="E16" data-view="Tile" data-text="E16"></div></li>
    <li data-row="5" data-col="17" data-sizex="1" data-sizey="1"><div data-id="E17" data-view="Tile" data-text="E17"></div></li>
    <li data-row="5" data-col="18" data-sizex="1" data-sizey="1"><div data-id="E18" data-view="Tile" data-text="E18"></div></li>
    <li data-row="5" data-col="19" data-sizex="1" data-sizey="1"><div data-id="E19" data-view="Tile" data-text="E19"></div></li>
    <li data-row="5" data-col="20" data-sizex="1" data-sizey="1"><div data-id="E20" data-view="Tile" data-text="E20"></div></li>

  </ul>
</div>