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

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

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

• 1 check out the new post for ui grid,working Manual Height Adjust – Atul Bisht Commented Feb 1, 2018 at 7:17

2 Answers 2

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

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