How to Change Height of Ui-Grid Row

How to change height of ui-grid row?

Take out the:

height: 22px !important;

from the css and add:

rowHeight:22

to the gridOptions.

I have the feeling that this is much smoother.

Forked Plunker

UI-GRID - Dynamic Row Height - Alternatives

You can see an answer to the same question here: https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267

UI-Grid virtualizes the rows, meaning that it only renders a small subset of the data, and leaves everything that wouldn't be in view unrendered. This means the grid needs to know how tall every row is, so that it can calculate positioning.

If it had to measure every row when rendered this would cause the browser to repaint over and over and performance would be miserable.

You'll find that other virtualized tools (like Ionic's collection-repeat) have the same limitation.

Update:

To answer your second question: you can set a height property on the GridRow object (not your entity, you can use getRow from the grid API to get the GridRow object) and the grid will use this height when rendering the row.

And your third question: no, expandable is only built to work off entire rows. It might be possible to alter what sort of data is displayed in a sub-grid based on clicks in certain cells, but that would require some changes to the expandable code.

angularjs ui-grid changing column height to auto causes weird line to show up on other columns

You may want to change the following in ui-grid.css

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

How do you set the row height in Semantic UI?

In 'row' class set height.

eg.

.row {
height: 100px;
}

---

Related Topics