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

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

ios - Possible to get UIButton sizeThatFits to work? -