ui-grid 的高度问题

Question

我想在 angularJS ui 网格上使用 height: auto。我运行遇到了内联样式的问题，该样式在我添加 ui-grid 属性的 div 上设置了特定高度。还有一个名为 getViewPortStyle() 的函数，它动态地向 .ui-grid-viewport class.

添加高度和宽度

关于应用于具有 ui-grid 属性的元素的内联样式，我尝试在 class 上用 height: auto !important; 覆盖元素。当 window 宽度或高度通过用户通过鼠标移动来操纵浏览器来增加或减少时 getViewPortStyle() 触发时，这非常有效。

我的想法是覆盖 ui-grid，这样 getViewPortStyle() 函数就不会触发。我喜欢通过 ui-grid api 禁用它的方法，但我无法在文档中找到任何可以解释如何做到这一点的内容。

抱歉，如果我在这个问题上到处都是。我会尝试深入研究...

“如何禁用 getViewPortStyle() 函数触发或覆盖 CSS，它根据浏览器 window 控制网格的高度和宽度？”

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

Answer 1

将 height: 100%; 添加到包含 height: auto; 的 .ui-grid 的子元素可解决问题。这是 LESS/SASS 嵌套版本，为了简洁起见...

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

Answer 2

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

ui-grid 的高度问题

Height issues with ui-grid

javascript

css

angularjs

angular-ui-grid

ui-grid getViewPortStyle 函数