ngMaterial and Handsontable

Table has issues within mdDialog

by ekevoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
<link rel="stylesheet" href="http://handsontable.github.io/ngHandsontable/bower_components/handsontable/dist/handsontable.full.css">
<script src="http://handsontable.github.io/ngHandsontable/bower_components/handsontable/dist/handsontable.full.js"></script>
<script src="http://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
<script src="http://handsontable.github.io/ngHandsontable/demo/js/services/dataFactory.js"></script>
<div ng-app='home' ng-controller="MainCtrl as ctrl">
  <md-button class="md-raised" ng-click="showDialog()">Dialog Test</md-button>
  <div ng-controller="TableController as table">
    <hot-table settings="table.settings" row-headers="table.rowHeaders" col-headers="table.colHeaders" datarows="table.items">
    </hot-table>
  </div>
</div>

CSS

md-dialog { width: 100%; }
/*md-backdrop { position:fixed; top:0 }
.md-dialog-is-showing { overflow: visible }*/

JavaScript

angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial', 'ngHandsontable']);

angular.module('home')
  .controller('MainCtrl', MainController)
  .controller('TableController', TableController);

function MainController($scope, $mdDialog) {

  $scope.showDialog = function() {
    $mdDialog.show({
      clickOutsideToClose: true,
      controller: TableController,
      controllerAs: 'ctrl',
      template: '<md-dialog>' +
        ' <md-dialog-content>' +
        '  <hot-table' +
        '   settings="ctrl.settings"' +
        '   row-headers="ctrl.rowHeaders"' +
        '   col-headers="ctrl.colHeaders"' +
        '   datarows="ctrl.items">' +
        '  </hot-table>' +
        ' </md-dialog-content>' +
        '</md-dialog>',
    });
  };
}

function TableController(dataFactory, hotRegisterer) {
  this.rowHeaders = true;
  this.colHeaders = true;
  this.items = dataFactory.generateArrayOfArrays(50, 100);
  this.settings = {
  	height: 500,
    onAfterInit: function() { window.myHot = this; console.log("myHot updated.", window.myHot); }
  };
}