ng-grid：垂直条没有达到应有的高度答案

【问题标题】：ng-grid: vertical bar not as high as it should beng-grid：垂直条没有达到应有的高度
【发布时间】：2015-04-14 02:46:36
【问题描述】：

在我的网站上，ng-grid 是这样的：

当我手动执行时，我发现它消失了：

.ngVerticalBar {
    line-height: 30px;
}

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

检查显示，从 scss 到 css 的编译在 body 标签上引入了 line-height: 1.428571429。将其注释掉并再次检查显示，不再为该元素设置 line-height，但 height 设置为 16px，尽管您看不到它的来源。既然有一个

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

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

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

所以我想我被困在这里了......

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

【问题讨论】：

我正在经历同样的事情......真正有趣的是，如果我在“ng-grid.debug.js”中编辑“rowTemplate”并在<ng-cell>之前添加{{rowHeight}}标记它在屏幕上将数字显示为“30”，即使 chrome 显示 20 的高度来自ng-style:{height: rowHeight}
我也遇到了同样的事情，但是在我开始使用 Grunt (concat) 之前一切都还好，所以这给了我一个暗示，这可能与事情的顺序有关？ css 的顺序和/或脚本的顺序

标签： javascript html css angularjs ng-grid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试设置：

rowHeight:30

在$scope.gridOptions.

在选项部分here中有解释

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

您也可以使用像 Plunker 这样的行模板，我将 rowHeight 强制为 80px，将 ngVerticalBar 强制为 100%。

将模板与原始 rowTemplate 示例进行比较here

【讨论】：

奇怪的是，gridOptions.rowHeight 已经设置为 30。而且我没有使用任何行或单元格模板。
同样使用网格模板仅适用于网格内的行。然后标题行仍然由半竖直条分隔......

【解决方案3】：

根据我在上面评论中的观察，我想出了一个解决方法，在模板中使用 ng-style 的字面值，例如：ng-style:{height: {{rowHeight}}px}

这是我更新的两个模板（将其放在“ng-grid.min.js”之后运行的代码中：

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>"
  );
}]);

【讨论】：

【解决方案4】：

对于一种解决方法，我可以将这个覆盖添加到我的 css 中：

.ngVerticalBar 
{
  line-height: 25px;
}

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

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

它可以工作，但这意味着同一个应用程序中的另一个页面在没有更多~~hacking~~工作的情况下不能有不同的行高。

【讨论】：