ng-grid：垂直条不应该高

Question

在我的网站上，ng-grid看起来像这样：

当我手动操作时，我发现这消失了：

.ngVerticalBar {
    line-height: 30px;
}

我已经注释掉了所有不相关的样式表。所以只有对ng-grid.css和我的main.scss的引用，但我没有触及那里的行高。

检查显示，从scss到css的编译在body标签上引入了line-height：1.428571429。注释掉并再次检查显示，该元素的行高不再设置，但高度设置为16px，尽管您没有看到它来自何处。 因为有一个

ng-style="{height: col.rowHeight}"

放在那个div上我猜它是从那里得到的。

所以我拿了batarang，看起来在col-object上设置了rowHeight，但是没有。

所以我想我已经被困在这里......

编辑： gridOptions.rowHeight已设置为30。

Answer 1

而不是在CSS文件中指定固定高度，更通用的解决方案是使用百分比值。

<style>
    .ngVerticalBar {
        height: 100%;
    }
</style>

Answer 2

尝试设置：

rowHeight:30

$scope.gridOptions中的

。

otions部分here

中对此进行了解释

您还可以为页眉和页脚设置特定的rowHeight。

您还可以使用此Plunker中的行模板，其中我将rowHeight强制为80px，将ngVerticalBar强制为100％。

将模板与原始rowTemplate示例here

进行比较

Answer 3

根据我在上述评论中所做的观察，我想出了一个在模板中使用ng-style的文字值的工作，例如：ng-style:{height: {{rowHeight}}px}

以下是我更新过的两个模板（将其放在代码中运行AFTER＆＃34; ng-grid.min.js＆＃34;：

angular.module("ngGrid").run(["$templateCache",
function($templateCache) {
  $templateCache.put("headerRowTemplate.html",
      "<div ng-style=\"{ height: col.headerRowHeight }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngHeaderCell\">" +
      " <div class=\"ngVerticalBar\" ng-style=\"{height: '{{col.headerRowHeight}}px'}\" ng-class=\"{ ngVerticalBarVisible: !$last }\">&nbsp;</div>" +
      " <div ng-header-cell></div>" +
      "</div>"
  );


  $templateCache.put("rowTemplate.html",
      "<div ng-style=\"{ 'cursor': row.cursor }\" ng-repeat=\"col in renderedColumns\" ng-class=\"col.colIndex()\" class=\"ngCell {{col.cellClass}}\">" +
      " <div class=\"ngVerticalBar\" ng-style=\"{height: '{{rowHeight}}px'}\" ng-class=\"{ ngVerticalBarVisible: !$last }\">&nbsp;</div>" +
      " <div ng-cell></div>" +
      "</div>"
  );
}]);

Answer 4

对于解决方法，我只能将此覆盖添加到我的css：

.ngVerticalBar 
{
  line-height: 25px;
}

这当然假设您已将25设置为您的rowHeight＆amp; gridOptions中的headerRowHeight：

$scope.gridOptions = { 
  data: yourData, 
  rowHeight: 25,
  headerRowHeight: 25}

它可以工作，但这意味着同一个应用中的另一个页面不能有更高的行高，而不会有更多的 hacking 工作。