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%;添加到.ui-grid的子元素（包含height: auto;）可以解决问题。这是LESS / SASS嵌套版本，为了简洁起见......

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

Answer 2

.ui-grid-viewport {height：100％！important; }

ui-grid

ui-grid getViewPortStyle函数

2 个答案: