ui-grid的高度问题

Question

ui-grid的高度问题

5

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

关于应用于具有ui-grid属性的元素的内联样式，我尝试使用一个在元素上具有的类来覆盖“!important; height: auto;”。这个方法很完美地工作，但当用户通过鼠标移动改变浏览器的宽度或高度时，“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;
        
        
        };

- fauverism

1

请查看 UI Grid 的新帖子，其中介绍了手动高度调整。 - Atul Bisht

2个回答

2

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

的中文翻译为：

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

- Fabien Thetis

2

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - builder-7000

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fauverism · Accepted Answer

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

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