ui-grid 的高度问题

Question

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

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

我的想法是覆盖 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;
   }
 }

Answer 2

.ui-grid-viewport { 高度：100% !important; }