title: angular-handsontable sizing/layout glitching when data inputted
body: <p>I'm building in Angular 5 and using <code>Handsontable</code> for a spreadsheet interface in some components. Handsontable is misbehaving and I cannot work out why.</p>
  
  <p>My config looks something like this:</p>
  
  <p><strong>settings.component.ts</strong></p>
  
  <pre><code>// staff and manager add Handsontable
  hotOne: any = {
    data: [],
    colHeaders: [
      'Name&lt;span style="color: var(--cbRed);"&gt;&amp;#42;&lt;/span&gt;',
      'Email&lt;span style="color: var(--cbRed);"&gt;&amp;#42;&lt;/span&gt;',
      'Staff Type&lt;span style="color: var(--cbRed);"&gt;&amp;#42;&lt;/span&gt;',
      'Activity&lt;span style="color: var(--cbRed);"&gt;&amp;#42;&lt;/span&gt;',
      'Employee ID',
      'WWCC Number',
      'WWCC Issue Date'
    ],
    columns: [], // set in ngOnInit (as we need to wait for user and organisation to be set)
    colWidths: [],
    options: {
      preventOverflow: 'horizontal',
      minRows: 20,
      minSpareRows: 1,
      rowHeaders: false,
      stretchH: 'all'
    }
  };
  </code></pre>
  
  <p><strong>settings.component.html</strong></p>
  
  <pre><code>&lt;div class="hot-container"&gt;
      &lt;hot-table
        [data]="hotOne.data"
        [columns]="hotOne.columns"
        [colHeaders]="hotOne.colHeaders"
        [colWidths]="hotOne.colWidths"
        [preventOverflow]="hotOne.options.preventOverflow"
        [minRows]="hotOne.options.minRows"
        [minSpareRows]="hotOne.options.minSpareRows"
        [rowHeaders]="hotOne.options.rowHeaders"
        [stretchH]="hotOne.options.stretchH"&gt;
      &lt;/hot-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>settings.component.css</strong></p>
  
  <pre><code>.hot-container {
    width: 100%;
    margin-bottom: 12px;
    height: 350px;
    overflow: hidden;
  }
  </code></pre>
  
  <p>The issues appear to stem largely from the <code>div.wtHolder</code> and <code>div.wtHider</code>. Pasting 30 items into the table results in:</p>
  
  <ol>
  <li><p>A large space being created below the table itself.</p></li>
  <li><p>Only 21/30 items showing in the table (i.e. only 21 <code>&lt;tr&gt;</code> elements). Interestingly, if I remove <code>overflow: hidden</code> from the css file, 28/30 items will show.</p></li>
  </ol>
  
  <p><strong>See this screenshot of the issue:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/LWcJ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LWcJ6.png" alt="enter image description here"></a></p>
  
  <p>Also, if I remove <code>height: 350px;</code> and <code>overflow: hidden;</code> from the CSS, pasting data, using the dropdown, tabbing between cells, and even opening and closing the terminal in Chrome causes the space below the table to grow and grow!?!?!</p>
  
  <p>Thanks for any help in pointing me in the right direction as to solving this problem :)</p>