title: Using HandsonTable in Bootstrap Modal doesn't work
body: <p>I'm trying to make use of <a href="http://handsontable.com/" rel="nofollow noreferrer">this jquery plugin</a> so I can have Excel-like cells on my website. However I'm using it with a modal as part of creating a new activity for an overview and that doesn't work quite as expected.</p>
  
  <p>For one, the cell is not rendered correctly until the modal is closed and re-opened and when I try to destroy the cells after closing the modal so I can re-add them blank, it doesn't remove the old cells but just adds a new set underneath.</p>
  
  <p>I deduce that this is because the modal is hidden initially, so the library can't render the cells right. Because I tried to put it on a blank website where it worked just fine. So I tried to add the cells after the modal is ready but that still doesn't work right.</p>
  
  <pre><code>function CreateHandsonTable() {
      $('#new-activity-modal').on('shown.bs.modal', function (e) {
          var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
          var container = document.getElementById("example");
          hot = new Handsontable(container, {
              data: data
          });
      });
      $('#new-activity-modal').on('hidden.bs.modal', function (e) {
          hot.destroy();
      });
  }
  </code></pre>
  
  <p>I use the above to create the cells, and this is what I got:</p>
  
  <p><a href="https://i.stack.imgur.com/khtiz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/khtiz.png" alt="enter image description here"></a></p>
  
  <p>You can see that the picture stretches way beyond what it's supposed to hold in the three cells. Now if I make the modal lose focus or close it, I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/dg6bI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dg6bI.png" alt="enter image description here"></a></p>
  
  <p>And a little further down I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/sl0jS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sl0jS.png" alt="enter image description here"></a></p>
  
  <p>So clearly it has to do with the fact that I want to use the cells with an initially hidden element and probably also using the plugin wrong due to the fact that I can't even delete the previous set of cells.</p>
  
  <p>Any help is appreciated :)</p>
  
  <p>I made a <a href="https://jsfiddle.net/1a5md8wn/5/" rel="nofollow noreferrer">jsfiddle</a> to help out.</p>