Dynamically resizing a container containing a Handsontable

Question

This is the HTML I got:

<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>

This is the corresponding 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;
}

Here is the animation to toggle the preview container 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();
    });
  });
});

Here is the code for the 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
  });
});

The scenario is as follows:

I've got a .main-content which takes up the whole window containing a Handsontable and a .preview-content which expands it width and shows content as soon as you click on the toggle button within the .main-content. The .preview-content is fixed and doesn't scroll with the .main-content.

The problem is that when the screen displaying the website is not big enough the .preview-content will cover parts of the Handsontable within the .main-content. To prevent this from happening I wanted to change the width and height of the container containing the Handsontable dynamically so that I get scrollbars in case the table gets covered in parts.

I've tried many things so far but nothing seems to work. And it seems like Handsontable only likes absolute pixel dimensions for its width and height, otherwise overflow: hidden doesn't seem to work.

I've tried to change the width of the .main-content from 100% to 45% and added overflow: auto to the .main-content as you can see in the code, but that doesn't work as it behaves very strange.

Maybe someone has any idea how I can change the width of a Handsontable dynamically?

Your help is very appreciated. And if you need any more info to help me just say it I will see if I can provide the right info.

Grodno

can you mark the answer as correct please? – Dickdicken

Answer 1

To dynamically change the width of a Handsontable instance you can do:

hotInstance.updateSettings({
    width: newWidth
});

Give that a try as this should take care of the CSS pitfalls of manually setting the .main-content width yourself.

Careen

One additional question: does the container var turn into the instance with .handsontable()? – Grodno

Yeah but I suggest setting the instance variable when initializing Handsontable since all of the documentation is written with that notation and it'll make it easier for you to follow it – Careen

I managed to change the width of table dynamically now. But there is still one problem remaining: as soon as I add overflow: hidden to #table (this should create the scrollbars for the table according to the Handsontable documentation) the Handsontable disappears. Do you know how to solve that? – Grodno

it's overflow:auto to show, hidden will hide them. I think what they're talking about is the native scrolling versus container scrolling (one scrolls the browswer page, the other the div with the overflow:hidden) – Careen

Nice thanks, added a jquery implementation of this below. – Ideate

Answer 2

Using the HandsonTable.updateSettings() and jQuery to dynamically resize the table whenever the window is resized:

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

Ideate

Answer 3

you can use resize event of Handsontable, and in calculateSize function write code to calculate height and width

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

Toffic