Constraining HandsOnTable to the size of its parent container

Question

I realize this is a simplistic example, but I wanted to get some explanation on how HandsOnTable expects to behave within a container. e.g. we have a Tab where we place HoT and we'd like it to consume 100% of the container space, but right now it doesn't appear to be constrained.

Here's an example. We'd like it constrained inside the red box.

document.addEventListener("DOMContentLoaded", function() {

  var
    myData = Handsontable.helper.createSpreadsheetData(200, 100),
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    fixedColumnsLeft: 2,
    contextMenu: true,
    manualColumnFreeze: true
  });

  function bindDumpButton() {
    if (typeof Handsontable === "undefined") {
      return;
    }

    Handsontable.Dom.addEvent(document.body, 'click', function(e) {

      var element = e.target || e.srcElement;

      if (element.nodeName == "BUTTON" && element.name == 'dump') {
        var name = element.getAttribute('data-dump');
        var instance = element.getAttribute('data-instance');
        var hot = window[instance];
        console.log('data of ' + name, hot.getData());
      }
    });
  }
  bindDumpButton();

});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/0.15.0-beta3/scripts/jquery.min.js"></script>
<script src="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.min.css">

<div style="height: 100px; width: 100px; background-color: red;">
  <div id="example1" class="hot handsontable"></div>
</div>

http://jsfiddle.net/jxh52650/

Answer 1

Unfortunately the red isn't showing in the fiddle but I think what you want is the stretchH:"all" property. This ensures that if you set a width on the parent container, it will stretch all columns to fill it 100%. After that, you want to set the style of the container to overflow:auto which will restrict the HOT instance to the width and height specified, and then use scroll bars after that.