Height issues with ui-grid

Question

I want to use height: auto on an angularJS ui-grid. I'm running into problems with an inline style that sets a specific height on the div that I am adding the ui-grid attribute. Also there is a function called getViewPortStyle() which is dynamically adding a height and width to the .ui-grid-viewport class.

In regards to the inline style that is being applied to the element with the ui-grid attribute, I've tried overriding with height: auto !important; on a class that is on the element. This works perfectly with the exception of the getViewPortStyle() firing when the window width or height is increased or decreased via the user manipulating the browser with mouse movement.

My thoughts are to overide ui-grid so the getViewPortStyle() function doesn't fire. I'd love a way to disable this via the the ui-grid api but I haven't been able to find anything in the docs that would explain how to do that.

Sorry if I'm all over the place on this question. I'll try and drill it down...

"How can I disable the getViewPortStyle() function from firing or override CSS that is controlling the height and width of the grid based upon the browser window?"

ui-grid getViewPortStyle function

         GridRenderContainer.prototype.getViewPortStyle = function () {
            var self = this;
            var styles = {};
            
            if (self.name === 'body') {
                styles['overflow-x'] = self.grid.options.enableHorizontalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            if (!self.grid.isRTL()) {
            if (self.grid.hasRightContainerColumns()) {
                styles['overflow-y'] = 'hidden';
            }
            else {
                styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            }
            }
            else {
            if (self.grid.hasLeftContainerColumns()) {
                styles['overflow-y'] = 'hidden';
            }
            else {
                styles['overflow-y'] = self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll';
            }
            }
            }
            else if (self.name === 'left') {
                styles['overflow-x'] = 'hidden';
                styles['overflow-y'] = self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
            }
            else {
                styles['overflow-x'] = 'hidden';
                styles['overflow-y'] = !self.grid.isRTL() ? (self.grid.options.enableVerticalScrollbar === uiGridConstants.scrollbars.NEVER ? 'hidden' : 'scroll') : 'hidden';
            }
            
            return styles;
        
        
        };

Flipper

check out the new post for ui grid,working Manual Height Adjust – Cepheus

Answer 1

Adding height: 100%; to the child element of .ui-grid, which contains height: auto; resolves the issue. Here's the LESS/SASS nested version, for the sake of brevity...

.ui-grid {
  height: auto;
   .ui-grid-viewport {
     height: 100% !important;
   }
 }

Flipper

Does this work no matter how many rows you add? I'm concerned that once you get past the virutalization threshold the rows will stop rendering. – Cautionary

I'm adding up to 60 rows via the pagination. I'll do some testing and check this out. – Flipper

Thank you! I burnt up so much time on this and your solution saved me. It works fine for various numbers of pagination rows too. – Harlin

Answer 2

.ui-grid-viewport { height: 100% !important; }

Voidable

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Calenture