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