title: Dynamically resizing a container containing a Handsontable
body: <p>This is the HTML I got:</p>
  
  <pre><code>&lt;div class="preview-content"&gt;
      &lt;h1 class="preview-content-header"&gt;Vorschau - Notiz1.txt &lt;img src="icons/cross.png" /&gt;&lt;/h2&gt;
      &lt;div&gt;
        &lt;h2&gt;Notiz1.txt&lt;/h2&gt;
        &lt;p&gt;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.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;img id="preview-toggle" src="icons/preview.png"&gt;
  
    &lt;div class="main-content"&gt;
      &lt;h2 class="main-content-header"&gt;Datenbank&lt;/h2&gt;
      &lt;div id="table"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is the corresponding CSS:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>Here is the animation to toggle the preview container on/off:</p>
  
  <pre><code>$(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();
      });
    });
  });
  </code></pre>
  
  <p>Here is the code for the Handsontable:</p>
  
  <pre><code>$(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
    });
  });
  </code></pre>
  
  <p>The scenario is as follows: </p>
  
  <p>I've got a <code>.main-content</code> which takes up the whole window containing a Handsontable and a <code>.preview-content</code> which expands it width and shows content as soon as you click on the toggle button within the <code>.main-content</code>. The <code>.preview-content</code> is fixed and doesn't scroll with the <code>.main-content</code>.</p>
  
  <p>The problem is that when the screen displaying the website is not big enough the <code>.preview-content</code> will cover parts of the Handsontable within the <code>.main-content</code>.
  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.</p>
  
  <p>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 <code>overflow: hidden</code> doesn't seem to work. </p>
  
  <p>I've tried to change the width of the <code>.main-content</code> from 100% to 45% and added <code>overflow: auto</code> to the <code>.main-content</code> as you can see in the code, but that doesn't work as it behaves very strange.</p>
  
  <p>Maybe someone has any idea how I can change the width of a Handsontable dynamically?</p>
  
  <p>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.</p>