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/

score 6 · Accepted Answer · edited May 02 '17 at 18:37

6

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.

edited May 02 '17 at 18:37

Wistar

3,770
4
45
70

answered Jun 10 '15 at 17:12

ZekeDroid

7,089
5
33
59

thanks, that was helpful. overflow=hidden seemed to work better than overflow=auto. overflow=auto didn't work well. I tried to include a bordered box around the grid and the sizing seemed wonky. I included a parent div of 300px, by 300px and a padding of 30px so I could see the red background. but I needed to size the grid to 300px by 300px to have it take up all of the inside space. Is this an artifact of how the grid is doing it's sizing? ' [http://jsfiddle.net/4yne0xbx/] ' How do most folks handle areas where they want the grid to consume the full size of the parent? – bkbonner Jun 11 '15 at 18:04
sorry about the formatting @ZekeDroid. I tried to fix it, but I didn't realize there was a time limit on edits. – bkbonner Jun 11 '15 at 18:12
well, can always use `width:100%` if the parent has a width. That would take up the whole width. The height is a little harder. Also, remember that padding takes 4 optional arguments. You gave it just one so it gave you Top padding (it starts at top and then goes clockwise; eg, the second argument is Right) – ZekeDroid Jun 11 '15 at 20:14

Constraining HandsOnTable to the size of its parent container

1 Answers1