将 HandsOnTable 限制为其父容器的大小答案

【问题标题】：Constraining HandsOnTable to the size of its parent container将 HandsOnTable 限制为其父容器的大小
【发布时间】：2015-08-24 17:40:30
【问题描述】：

我意识到这是一个简单的示例，但我想了解一下 HandsOnTable 期望在容器中的行为方式。例如我们有一个放置 HoT 的选项卡，我们希望它占用 100% 的容器空间，但现在它似乎没有受到限制。

这是一个例子。我们希望它被限制在红色框内。

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/

【问题讨论】：

标签： javascript css handsontable

【解决方案1】：

不幸的是，红色没有出现在小提琴中，但我认为你想要的是 stretchH:"all" 属性。这确保如果您在父容器上设置 width，它将拉伸所有列以填充 100%。之后，您要将容器的样式设置为overflow:auto，这会将 HOT 实例限制为指定的宽度和高度，然后使用滚动条。

【讨论】：

谢谢，这很有帮助。溢出=隐藏似乎比溢出=自动更好。溢出=自动效果不佳。我试图在网格周围包含一个带边框的框，并且尺寸看起来很不稳定。我包括了一个 300px、300px 和 30px 的填充的父 div，这样我就可以看到红色背景。但我需要将网格的大小调整为 300 像素乘 300 像素，以使其占据所有内部空间。这是网格如何调整大小的人工制品吗？ ' [jsfiddle.net/4yne0xbx/]' 大多数人如何处理他们希望网格占用父级的完整大小的区域？
对@ZekeDroid 的格式设置感到抱歉。我试图修复它，但我没有意识到编辑有时间限制。
好吧，如果父级有宽度，总是可以使用width:100%。那将占据整个宽度。高度有点难。另外，请记住填充需要 4 个可选参数。你只给了它一个，所以它给了你顶部填充（它从顶部开始，然后顺时针方向；例如，第二个参数是 Right）