javascript - ui-grid 的高度问题

Question

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

关于应用于具有 ui-grid 属性的元素的内联样式，我尝试用 height: auto !important; 覆盖元素上的类.这与 getViewPortStyle() 异常(exception)情况完美，当窗口宽度或高度通过用户使用鼠标移动来操纵浏览器而增加或减少时触发。

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

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

“如何禁止 getViewPortStyle() 函数触发或覆盖基于浏览器窗口控制网格高度和宽度的 CSS？”

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