Ng-grid: the vertical strip is not as high as it should be

Question

On my website, ng-grid is as follows:

I found out that this disappears when I manually do:

.ngVerticalBar {
    line-height: 30px;
}

Of course, I commented on all non-local styles. So there is only a link to ng-grid.css and my main.scss, but I do not touch the row height.

The check shows that compiling from scss to css introduces the line height: 1.428571429 on the body tag. Commenting this out and checking again, this line is no longer set for this element, but the height is set to 16 pixels, although you cannot see where it came from. Since there

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

placed in this div, I would suggest that he got it from there.

So, I took batarang and saw that rowHeight was installed on the col object, but no.

So, I think I'm pretty stuck here ...

EDIT: gridOptions.rowHeight 30.

Answer 1

CSS .

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

Answer 2

:

rowHeight:30

$scope.gridOptions.

rowHeight .

, Plunker, rowHeight 80px ngVerticalBar 100%.

rowTemplate

Answer 3

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

Answer 4

css:

.ngVerticalBar 
{
  line-height: 25px;
}

, , , 25 rowHeight headerRowHeight gridOptions:

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

, , hacking.