javascript - Dynamically increase ng-grid row height depending on content without additional plugins and jquery -
this question asked here angular ng-grid row height
but not satisfy requirement if use css fix problem affect page responsiveness , ng-grid's header functionalities sort,etc .
.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; }
there solution without affecting page responsiveness , have solve pure java script / angularjs/css
i've implemented easy solution dynamically change table's height strictly based on visible rows. using ui-grid-unstable v3.0
my html looks like:
<div id="grid1" ui-grid="gridoptions" ui-grid-grouping ui-grid-exporter class="grid"></div>
in controller add:
$scope.$watch('gridapi.core.getvisiblerows().length', function() { if ($scope.gridapi) { $scope.gridapi.core.refresh(); var row_height = 30; var header_height = 31; var height = row_height * $scope.gridapi.core.getvisiblerows().length + header_height; $('.grid').height(height); $scope.gridapi.grid.handlewindowresize(); } });
and turn off scrolling add following line gridoptions initialized:
enableverticalscrollbar : uigridconstants.scrollbars.never,
make sure uigridconstants passed controller:
angular.module('app').controller('maincontroller', function($scope, uigridconstants) { ...
hope helps!
Comments
Post a Comment