首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >角度ng网格行高

角度ng网格行高
EN

Stack Overflow用户
提问于 2013-09-30 20:49:23
回答 6查看 17.8K关注 0票数 21

有没有办法根据它的内容在ng-grid中应用行的高度。有一个选项rowHeight可以改变所有行的高度。但是我想要根据它的内容动态的行高。

下面是我做的柱塞,在这里我用cellTemplate插入了教育字段,但是我想根据教育字段的细节增加行的高度。

http://plnkr.co/edit/tQJNpB?p=preview

根据这个链接,这是不可能的:1

但如果有人能找到解决办法……

EN

回答 6

Stack Overflow用户

发布于 2013-12-01 23:25:19

这些类将使用display table-row和table-cell使表充当实际的表。

代码语言:javascript
复制
.ngCell  {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ngRow {
  display : table-row;
  height: auto !important;
  position: static;
}

.ngCellText{
  height: auto !important;
  white-space: normal;
  overflow:visible;
}

请注意,这是由IE8和更高版本支持的。它还覆盖了整个ng网格类,所以明智的做法是在“需要”的基础上使用:

代码语言:javascript
复制
#myTableId .ngCell {...}
#myTableId .ngRow {...}
...
票数 21
EN

Stack Overflow用户

发布于 2014-02-14 04:47:48

研究发现,在我的修复中,只要对ngGrid数据进行更改,就应该调用匿名函数$scope.resizeViewPort,或者应该在更新视口行时调用它。

例如,在angular通过来自ng-grid模块的数据对行执行更新之后。我发现这些步骤在我的匿名函数中只对高度有用:

代码语言:javascript
复制
$scope.resizeViewPort = function { // and the two steps below
  // retrieve viewPortHeight
  var viewportHeight = $('ngViewPort').height();
  var gridHeight = $('ngGrid').height();

  // set the .ngGridStyle or the first parent of my ngViewPort in current scope
  var viewportHeight = $('.ngViewport').height();
  var canvasHeight = $('.ngCanvas').height();
  var gridHeight = $('.ngGrid').height();

  alert("vp:" + viewportHeight + " cv:" + canvasHeight + " gh:" + gridHeight);
  var finalHeight = canvasHeight;
  var minHeight = 150;
  var maxHeight = 300;


  // if the grid height less than 150 set to 150, same for > 300 set to 300
  if (finalHeight < minHeight) {
    finalHeight = minHeight;
  } else if (finalHeight > viewportHeight) {
    finalHeight = maxHeight;
  }

  $(".ngViewport").height(finalHeight);
}
票数 2
EN

Stack Overflow用户

发布于 2014-04-17 05:02:49

我想在这个问题上插话。我已经跟进了这个例子,并使用了getuliojr提供的解决方案。这个解决方案似乎工作得很好,请注意,您必须克隆fork并构建源代码才能在您的应用程序中使用。我有一个关于它的现场直播:http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

注意:您还需要添加2个css规则:

代码语言:javascript
复制
.ngCellText{
    white-space:normal !important;
    }

.ngVerticalBarVisible{
      height: 100% !important;
    }

我还没有在很大的负载或跨浏览器的情况下测试它,但是一旦我这样做了,我会更新更多的。

通过getuliojr:https://github.com/getuliojr/ng-grid/commits/master实现具有可变高度的ng网格的GH Repo

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19094723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档