Menu
We would like to use the Angular UI ng-grid, but can't seem to find an option to tell the viewport within the grid to not set the overflow to auto and not scroll.
What we'd like to do is have the table/grid height be dynamic based off the size of the number of rows in our grid. We have a fixed max number of rows so there is little concern with having too many rows in the DOM.
Any suggestions on where to go?
273
Scrolling in Angular Grid component The scrollbar will be displayed in the grid when content exceeds the element width or height. The vertical and horizontal scrollbars will be displayed based on the following criteria: The vertical scrollbar appears when the total height of rows present in the grid exceeds its element height.
If the height or width of the Grid content exceeds the height or width of the Grid itself, the Grid renders a vertical or horizontal scrollbar respectively. To enable horizontal scrolling, set the width of all columns.
This ensures the index is visible, scrolling the table if needed. In the example below, if you expand a group at the bottom, the grid will scroll so all the children of the group are visible.
Here we show examples of some unusual use cases of scrolling and the grid. It is possible to show scrollbars even when there is not enough data to need scrolling. This voids visual table 'jumps' when toggling short and long data sets. To make that work, use the alwaysShowHorizontalScroll and alwaysShowVerticalScroll properties of the Grid.
Adding this to your CSS will fix your problem:
.ngViewport{
height:auto !important;
}
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel {
width: 100% !important;
}
.ngRow {
border-bottom:none !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
