fauverism fauverism - 4 days ago 6
AngularJS Question

Height issues with ui-grid

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;


};

Answer

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