javascript - 动态调整包含 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 陷阱。