Angularjs ui-grid row not resizing according to co

Question

I have a ui-grid(v3.0.0-rc.20-8199eb5) cellTemplate which iterates over an array and prints out the names in the column.

{name:'roles', cellTemplate: '<div ng-repeat="role in row.entity.roles>{{role.name}}</div>'}

The row height is not big enough for the content and cuts it off. Row height will differ per entry depending on the amount of roles for the entry.

Is there a way for the entire row to auto expand/resize according to the content in the row?

Answer 1

The solution that worked for me in the end was editing the css for the ui-grid.

.ui-grid-cell { display : table-cell; height: auto !important; overflow:visible; position: static; padding-top: 10px; } 
.ui-grid-row { display : table-row; height: auto !important; position: static; } 
.ui-grid-cell-contents{ height: auto !important; white-space: normal; overflow:visible; } 

Answer 2

This is my modified CSS in order to get auto row/cell heights. (I modified what @Rentius2407 did slightly and removed some unneccesary(?) properties.

.ui-grid-row {
  display: table-row;
  height: auto !important;
}
.ui-grid-cell {
  display: table-cell;
  height: auto !important;
  vertical-align: middle;
  float: none;
}
.ui-grid-cell-contents {
  height: auto !important;
}

Also, this breaks the virtualization scrolling in ui-grid, so in order to make scrolling work properly, I had to disable virtualization by setting virtualizationThreshold: 100. For my purposes, I know I'll never be displaying more than 100 rows at a time, but you should be able to modify the virtualizationThreshold as necessary.