Angularjs ui-grid row not resizing according to content

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?

Rentius2407 · Accepted Answer · 2015-04-15 13:00:29Z

2

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

answered Apr 15, 2015 at 13:00

Rentius2407

1,1482 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

robert.bo.roth Over a year ago

Does this still work with the current version? I have been trying something similar (and then tried pasting your code in), but I see weirdly-sized cells still. Nevermind. My issue is related to coloring alternate rows.

robert.bo.roth Over a year ago

Any ideas on how to center text vertically in the cells/rows?

robert.bo.roth · Accepted Answer · 2015-09-08 19:52:23Z

0

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.

answered Sep 8, 2015 at 19:52

robert.bo.roth

1,3534 gold badges15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angularjs ui-grid row not resizing according to content

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related