CODEWITHSUNDEEP
angularjsangular-uiangular-ui-grid
Rentius2407
Rentius2407

Reputation: 1148

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?

Upvotes: 0

Views: 3920

Answers (2)

robert.bo.roth
robert.bo.roth

Reputation: 1353

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.

Upvotes: 0

Rentius2407
Rentius2407

Reputation: 1148

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

Upvotes: 2

Related Questions