I'm getting this weird behavior from ui-grid which if I set the rowHeight to auto, each cell in a same row will have different height. One of the cells in each row will have multiline data, but apparently ui-grid will choke on that. (I colored the row so you can see what is wrong!) Any idea how to fix this? I mean to get same height for all the cells in each row. How do you handle different row heights in a same grid?

I'm getting this weird behavior from ui-grid which if I set the rowHeight to auto, each cell in a same row will have different height. One of the cells in each row will have multiline data, but apparently ui-grid will choke on that. (I colored the row so you can see what is wrong!) Any idea how to fix this? I mean to get same height for all the cells in each row. How do you handle different row heights in a same grid?

• javascript
• css
• angularjs
• ng-grid
• angular-ui-grid

• this is the problem : plnkr.co/edit/9Ndmv6R0ebWWNN6Ab3yz – Javid_p84 Commented Jan 28, 2015 at 17:13
• any updates?? same problem here... – Ganesh Vellanki Commented Mar 17, 2015 at 7:21
• Not really, as you can see in this link github./angular-ui/ng-grid/issues/2656 , I was in touch with them but unfortunately, they don't wanna fix it.... – Javid_p84 Commented Mar 17, 2015 at 21:45
• no!! that's a disaster..it is really an important feature..., how can they ignore it? – Ganesh Vellanki Commented Mar 18, 2015 at 4:14
• any other grids you remend..? – Ganesh Vellanki Commented Mar 18, 2015 at 4:17

2 Answers 2

Use CSS

[ui-grid-row] {
  display: table-row;
}

.ui-grid-row, .ui-grid-cell {
  height: auto!important;
}

.ui-grid-cell {
  float: none;
  display: table-cell;
}

.ui-grid-header-cell, .ui-grid-cell-contents {
  white-space: normal;
  padding: 2px;
  word-break: break-word;
}

Use JavaScript

When you are using multiselect the height of the check column don't change, so you can set enableRowHeaderSelection: false. It will hide this column but still you can select the rows or if you want you can use this function from @jibap to align containers http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview

Virtualization is pretty much impossible without pre-defined row heights. You'll find the same limitation with any virtualized list tool. Check Ionic's collection-repeat for instance.

The problem is that UI-Grid is only displaying a subset of all the rows at any given time, but in order for it make it appear like all the rows are there it has to create empty space around the rendered rows. If it doesn't know how tall all the rows are, it doesn't know how much empty space there should be.

If you wanted automatic row height it would have to render each row individually, measure it, then sum up all the heights. This would pletely thrash the browser.