动态调整包含 Handsontable 的容器的大小

Question

这是我得到的 HTML：

<div class="preview-content">
    <h1 class="preview-content-header">Vorschau - Notiz1.txt <img src="icons/cross.png" /></h2>
    <div>
      <h2>Notiz1.txt</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>

  <img id="preview-toggle" src="icons/preview.png">

  <div class="main-content">
    <h2 class="main-content-header">Datenbank</h2>
    <div id="table">
    </div>
  </div>

这是对应的 CSS：

/* General Style */
html, body {
  margin: 0px;
  padding: 0px;
  background: $background-color;
  font-family: $font;
  overflow-x: hidden;
}

/* Main Content */
div.main-content {
  padding: 50px 0px 20px 70px;
  width: 45%;
  overflow: auto;

  h2.main-content-header {
    margin: 0;
  }
}

#preview-toggle {
  display: none ;
  position: fixed;
  z-index: 3;
  top: 50px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: $nav-color;
  color: $font-color-secondary;
  cursor: pointer;
  transition: .3s background-color;
  -webkit-transition: .3s background-color;
}

#preview-toggle:hover {
  background-color: $main-color;
}

/* Preview */
div.preview-content {
  position: fixed;
  z-index: 3;
  right: 0px;
  margin: 0;
  width: 50%;
  height: 100%;
  font-size: 70%;

  img {
    float: right;
    height: 25px;
    padding: 0px 15px 0px 0px;
    cursor: pointer;
  }

  h1 {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: 0;
    padding: 5px 5px 5px 10px;
    background-color: $preview-header-color;
    color: $font-color-secondary;
    white-space: nowrap;
  }

  div {
    position: fixed;
    z-index: 3;
    height: 100%;
    margin: 0;
    padding: 10px;
    background-color: $data-background-color;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-line;
    word-wrap: break-word;

  }
}

/* Database table */

#table {
  z-index: 1;
}

这是打开/关闭预览容器的动画：

$(document).ready(function() {
  $(' .preview-content-header img').click(function() {
    $('.main-content').animate({
      width: "100%"
    });
    $('.preview-content').animate({
      width: "0%"
    }, 300, function() {
      $('#preview-toggle').toggle();
    });
    $('.preview-content img').toggle();
  });

  $('#preview-toggle').click(function() {
    $('.main-content').animate({
      width: "45%"
    });
    $('#preview-toggle').toggle();
    $('.preview-content').animate({
      width: "50%"
    }, 300, function() {
      $('.preview-content img').toggle();
    });
  });
});

这是 Handsontable 的代码：

$(document).ready(function() {
  var data = [
    ["Dateiname", "Benutzer", "Erstelldatum", "Änderungsdatum", "Erste Zeile", "Kategorie", "Projekt"],
    ["Rechnung1.doc", "SB", "01.01.2010", "-", "Internetrechnung", "Rechnungen", "Haushalt"],
    ["Rechnung2.doc", "SB", "01.01.2012", "-", "Stromrechnung", "Rechnungen", "Haushalt"]
  ];

  var container = $('#table');

  container.handsontable({
    data: data,
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
  });
});

场景如下：

我有一个.main-content，它占据了整个窗口，其中包含一个 Handsontable 和一个 .preview-content，只要您单击 .main-content 中的切换按钮，它就会扩展它的宽度并显示内容。 .preview-content 是固定的，不会与 .main-content 一起滚动。

问题是当显示网站的屏幕不够大时，.preview-content 将覆盖.main-content 内的部分 Handsontable。 为了防止这种情况发生，我想动态更改包含 Handsontable 的容器的宽度和高度，以便在表格被部分覆盖时获得滚动条。

到目前为止，我已经尝试了很多东西，但似乎没有任何效果。而且似乎 Handsontable 只喜欢其宽度和高度的绝对像素尺寸，否则 overflow: hidden 似乎不起作用。

我尝试将 .main-content 的宽度从 100% 更改为 45%，并将 overflow: auto 添加到 .main-content，正如您在代码中看到的那样，但这不起作用，因为它的行为非常奇怪。

也许有人知道如何动态更改 Handsontable 的宽度？

非常感谢您的帮助。如果您需要更多信息来帮助我，请直接说出来，我会看看能否提供正确的信息。

Answer 1

要动态更改 Handsontable 实例的宽度，您可以这样做：

hotInstance.updateSettings({
    width: newWidth
});

尝试一下，因为这应该可以解决自己手动设置 .main-content 宽度的 CSS 陷阱。

Answer 2

每当调整窗口大小时，使用HandsonTable.updateSettings() 和 jQuery 动态调整表格大小：

$(document).ready(function(){
    $(window).resize(function(){
        hotInstance.updateSettings({
            width: $('hotWrapperDiv').width()
        });
    });
});

Answer 3

可以使用Handsontable的resize事件，在calculateSize函数中编写代码计算高宽

Handsontable.Dom.addEvent(window, 'resize', calculateSize);