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，它会扩展它的宽度，并在您点击{中的切换按钮后立即显示内容{1}}。 .main-content已修复，并且不会使用.preview-content滚动。

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

到目前为止，我尝试过很多东西，但似乎没有任何效果。似乎Handsontable只喜欢其宽度和高度的绝对像素尺寸，否则.main-content似乎不起作用。

我已尝试将overflow: hidden的宽度从100％更改为45％并将.main-content添加到overflow: auto，如代码中所示，但是不行，因为它表现得非常奇怪。

也许有人知道如何动态更改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）;

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

3 个答案: