ui-grid的高度问题

Question

我想height: auto在angularJS ui-grid上使用.我遇到了一个内联样式的问题,它在我添加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;
   }
 }