Geek Answers Handbook

UI mesh height issues

I want to use height: autoon a corner grid. I have problems with the inline style, which sets a certain height in the div, which I add to the ui-grid attribute. There is also a function called getViewPortStyle()that dynamically adds height and width to the .ui-grid-viewport class.

Regarding the inline style that applies to the element with the ui-grid attribute, I tried to override with the help height: auto !important;in the class that is on the element. This works great, except getViewPortStyle()when shooting , when the width or height of the window increases or decreases with the help of a user manipulating the browser with the mouse.

My thoughts is to redefine the ui grid so that the function getViewPortStyle()does not work. I would like a way to disable this via the ui-grid api, but I could not find anything in the docs that would explain how to do this.

Sorry if I'm all over the subject. I will try to deploy it ...

"How do I disable a function getViewPortStyle()when starting or overriding CSS that controls the height and width of the grid based on the browser window?"

Ui-grid function getViewPortStyle

         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;


        };
+4
source share
2 answers

Adding height: 100%;to the .ui-grid containing child element height: auto;fixes the problem. Here's the LESS / SASS nested version for short ...

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

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

+1

More articles:


All Articles