javascript - Dynamically increase ng-grid row height depending on content without additional plugins and jquery -

This question is already asked here

But if we use CSS then all of these I do not fulfill my requirement, fix the problem affect the feedback of the page and sort of ng-grid header functionality such as etc.

  .ngcl {display: table-cell; Height: Auto! Important; Overflow: visible; Status: Stable; } .ngRow {display: table-row; Height: Auto! Important; Status: Stable; } .ngCellText {height: auto! Important; White Location: Normal; Overflow: visible; }  

This is no solution without affecting the liability of this page and it is a pure java script / angular / css

post text "Itemprop =" text ">

I implemented a simple solution to dynamically change the height of the table based on the visible rows. I am using the UI-grid-volatile v3.0

My HTML looks like this:

In your 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 = line_height * $ scope.gridApi.core.getVisibleRows (). Length + header_height; $ ('.grid') height (height); $ scope.gridApi.grid.handleWindowResize ();}});  

To close the scrolling and add the following line where the grid options have been started:

  enabled vendor scraps Libre: uiGridConstants.scrollbars.NEVER,  

Make sure that uiGridConstants have been passed to your controller:

  angular.module ('app') Controller ('mainController', function ($ scope, uiGridConstants) {...  

Hope it helps!