动态调整包含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将覆盖在其中的部分Handsontable .main-content.为了防止这种情况发生,我想动态更改包含Handsontable的容器的宽度和高度,以便在表格被部分覆盖的情况下获得滚动条.

到目前为止,我尝试过很多东西,但似乎没什么用.似乎Handsontable只喜欢其宽度和高度的绝对像素尺寸,否则overflow: hidden似乎不起作用.

我试图将宽度.main-content从100%更改为45%并添加overflow: auto到.main-content代码中可以看到,但这不起作用,因为它表现得非常奇怪.

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

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

Answer 1

要动态更改Handsontable实例的宽度,您可以执行以下操作:

hotInstance.updateSettings({
    width: newWidth
});

试一试,因为这应该照顾.main-content自己手动设置宽度的CSS陷阱.