CODEWITHSUNDEEP
javascripthtmlcssangularjsng-grid
Sentenza
Sentenza

Reputation: 1249

ng-grid: vertical bar not as high as it should be

On my website, ng-grid looks like this:

my ng-grid

I've found out that this disappears, when I manually do:

.ngVerticalBar {
    line-height: 30px;
}

I have commented out all irrelevant stylesheets of course. So there's only a reference to the ng-grid.css and my main.scss, but I'm not touching line-height over there.

Inspection reveals, that the compilation from scss to css introduces line-height: 1.428571429 on the body tag. Commenting this out and inspecting again reveals, that line-height isn't set anymore for that element, but height is set to 16px, although you don't see where it's coming from. Since there's a

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

placed onto that div I'd guess that it's getting it from there.

So I took batarang and looked wether there is a rowHeight set on the col-object, but there's not.

So I guess I'm pretty stuck here...

EDIT: gridOptions.rowHeight is already set to 30.

Upvotes: 4

Views: 1066

Answers (4)

Sback
Sback

Reputation: 21

Instead of specifying a fixed height in the CSS file, a more universal solution would be to use a percentage value. 

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

Upvotes: 2

James Bell
James Bell

Reputation: 938

For a workaround I was able to just add this override to my css:

.ngVerticalBar 
{
  line-height: 25px;
}

This of course assumes you have set 25 to be your rowHeight & headerRowHeight in gridOptions:

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

It works but it means another page in the same app can't have a different row height without some more hacking work.

Upvotes: 0

Adam Nemitoff
Adam Nemitoff

Reputation: 615

Based the observation I made in the comment above, I came up with a work around using the literal value for ng-style in the template, like: ng-style:{height: {{rowHeight}}px}

Here are the two templates I have updated (putting this in code that runs AFTER "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>"
  );
}]);

Upvotes: 0

mainguy
mainguy

Reputation: 8331

Try to set:

rowHeight:30

in $scope.gridOptions.

It's explained in the otions part here

You can also set a particular rowHeight for Header and Footer.

You could also use a row template like in this Plunker where i force rowHeight to 80px and ngVerticalBar to 100%.

Compare the template to the original rowTemplate example here

Upvotes: 0

Related Questions