Почему Handsontable не показывает все ячейки в полноэкранном режиме? - PullRequest
Новая
       11

Почему Handsontable не показывает все ячейки в полноэкранном режиме?

0 голосов
/ 12 июня 2019

Сначала я создаю Handsontable с помощью функции addTable.Я создаю div с идентификатором «hotTable», который является контейнером таблицы.Когда я пытаюсь установить этот контейнер div в полноэкранном режиме, все работает нормально.Но если я попытаюсь прокрутить таблицу вниз, я не получу больше информации.Остальная часть таблицы просто черная. 

// If status = false request fullscreen
fullscreen(status, id, callback = function () {}) {
  if(status) {
    document.exitFullscreen();
  } else {
    var element = document.getElementById(id);
    element.parentNode.requestFullscreen();
    element.style.width = '100%';
    element.style.height = '100%';
    element.style.overflow = 'auto';
  }
callback();
}

// create Handsontable
addTable(ifcClass) {

  let self = this;
  this._hots[ifcClass] = null;
  this._tabs[ifcClass] = document.createElement("DIV");
  this._div.appendChild(this._tabs[ifcClass]);
  this._div.id = "hotTable";
  // add a button to open the tab
  let func = function() {
    self.openTab(ifcClass)
  };

  // let btn = newButton(ifcClass, func);
  // this._rightButtonDiv.appendChild(btn);
  // this._contentDiv.appendChild(this._tabs[ifcClass]);

}

Я ожидаю, что контейнер будет работать в полноэкранном режиме, и Таблица будет расширять его.Но таблица не загружает полностью только первые несколько строк.

Вот JSFiddle с той же проблемой:

https://jsfiddle.net/patrickluethi97/qreLuxkb/

1 Ответ

0 голосов
/ 14 июня 2019

Вам необходимо создать контейнер вокруг стола. Установите Handsontable на ширину / высоту 100% контейнера и измените размер контейнера на Fullscreen.

Рабочая JSfiddle: https://jsfiddle.net/jsfLn3pc/

HTML: 

<div id="container">
  <div id="example"></div>
</div>

JS: 

var data = function () {
  return Handsontable.helper.createSpreadsheetData(100, 10);
};

var container = document.getElementById('example');

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  width: '100%',
  height: '100%',
});

var button = document.getElementById("test");
button.addEventListener("click", function () {
    fullscreen('container');
})

function fullscreen(id) {
    var element = document.getElementById(id);
    element.parentNode.requestFullscreen();
    element.style.width = '100%';
    element.style.height = '100%';
}

CSS: 

body {
  margin: 20px 30px;
  font-size: 13px;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

#container {
  width: 400px;
  height: 400px;
  overflow: hidden;
}
...