我想在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;


        };

最佳答案

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

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

07-24 09:46
查看更多