Angularjs ui-grid row not resizing according to content

问题

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?

回答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; } 

回答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.

来源：https://stackoverflow.com/questions/29648643/angularjs-ui-grid-row-not-resizing-according-to-content