[AngularJS] How to implement ng-grid with dynamic cell height

Problem
I implement a data grid by means of AngularJs ng-grid.
But if the data will not be display completely if its too long.
The screenshot looks like this:


JavaScript code snippet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

$scope.gridCols = [ { field : 'serviceType', width : '10%', displayName : '整合服務別', cellClass : 'text-left', cellFilter : 'serviceTypeFilter' },{ field : 'sourceName', width : '9%', displayName : '來源系統', cellClass : 'text-left' }, { field : 'userId', width : '7%', displayName : '執行人', cellClass : 'text-left' }, { field : 'exeResult', width : '7%', displayName : '執行結果', cellClass : 'text-left', cellFilter : 'exeResultFilter' }, { field : 'policyNumber', width : '10%', displayName : '保單號碼', cellClass : 'text-left' },{ field : 'exeMsg', width : '40%', displayName : '執行訊息', cellClass : 'text-left' },{ field : 'exeTime', width : '16%', displayName : '執行時間', cellFilter : "date:'yyyy-MM-dd HH:mm:ss'", cellClass : 'text-left' }]; $scope.dataGrid = { multiSelect : false, data : 'itemData', columnDefs : 'gridCols', enableColumnResize: true, enableRowSelection: false, rowHeight : 40 }; });

HTML code snippet:

1 2 3 4

<div class="row"> <div class="grid-style text-center" data-ng-grid="dataGrid" style="display: inline-block; height: 300px; width: 100%;"></div> </div>

How-to
The solution is pretty simple. You just need to overwrite CSS, 
It looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<style type="text/css"> .ngCell { display : table-cell; height: auto !important; overflow:visible; position: static; } .ngRow { display : table-row; height: auto !important; position: static; } .ngCellText{ height: auto !important; white-space: normal; overflow:visible; } </style>

Check the result:

Reference
[1] https://github.com/angular-ui/ui-grid/issues/1523