Search code examples
javascriptbrowserifyhandsontable

Handsontable is not displaying properly

I'm having an issue with handsontable displaying properly. I've made this basically as simple as I can and I'm getting just bizarre results. I've installed handsontable through bower and am running it locally -- i'm fairly confident it's loading, but it just looks bizarre.

Index.html:

<!DOCTYPE html>
<html>

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="bower_components/handsontable/dist/handsontable.full.min.js"></script>
  <link rel="stylesheet" media="screen" href="/dist/handsontable.full.css">
  <div id="example"></div>
  <script type="text/javascript">
    var data = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2016", 10, 11, 12, 13],
      ["2017", 20, 11, 14, 13],
      ["2018", 30, 15, 12, 13]
    ];

    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
      data: data,
      rowHeaders: true,
      colHeaders: true
    });
  </script>
</html>
<style>

Example of what it looks like

I can't select anything properly, and obviously it looks bizarre. Any idea what could be going wrong here? I'm at a bit of a loss I'm afraid.

Solution

  • Okay, got it solved -- not exactly sure why, but switching my script sources to option 3 here. Hopefully this helps someone down the line!