动态调整包含 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;
}

这是切换预览容器的动画on/off:

$(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();
    });
  });
});

Handson 的代码如下table:

$(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，它占据了整个 window，其中包含一个 Handsontable 和一个 .preview-content，它扩展了它的宽度并尽快显示内容您单击 .main-content 中的切换按钮。 .preview-content 是固定的，不会随着 .main-content.

滚动

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

到目前为止，我已经尝试了很多方法，但似乎没有任何效果。而且似乎 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 在 window 调整大小时动态调整 table 的大小：

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

Answer 3

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

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

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

Dynamically resizing a container containing a Handsontable

html

javascript

css

jquery

handsontable