javascript - Dynamically resizing a container containing a Handsontable -

this html 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. @ 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. @ 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. @ 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 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 animation toggle 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 code 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 follows:

i've got .main-content takes whole window containing handsontable , .preview-content expands width , shows content click on toggle button within .main-content. .preview-content fixed , doesn't scroll .main-content.

the problem when screen displaying website not big enough .preview-content cover parts of handsontable within .main-content. prevent happening wanted change width , height of container containing handsontable dynamically scrollbars in case table gets covered in parts.

i've tried many things far nothing seems work. , seems handsontable likes absolute pixel dimensions width , height, otherwise overflow: hidden doesn't seem work.

i've tried change width of .main-content 100% 45% , added overflow: auto .main-content can see in code, doesn't work behaves strange.

maybe has idea how can change width of handsontable dynamically?

your appreciated. , if need more info me see if can provide right info.

to dynamically change width of handsontable instance can do:

hotinstance.updatesettings({     width: newwidth }); 

give try should take care of css pitfalls of manually setting .main-content width yourself.