Ngx-datatable: body height is too small (recalculate dimensions not working correctly)

[ghost]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When loading NGX-Datablewith virtual scrolling enabled, the body height is calculated incorrectly.

the height of the table element (this.element) is set to 118px, should I be setting this manually?

the body of the datatable is set to a height of 19px but the row height is set to 50.

the ng-reflect-body-height is set to "19", not sure why this is getting calculated incorrectly.

Expected behavior
More than 1 row should be appearing and the body height should be number of rows multiplied by the row height (at a minimum).

Reproduction of the problem

The code:

<ngx-datatable
   class="material"
   [rows]="rows"
   [columns]="columns"
   [loadingIndicator]="loading"
   [scrollbarV]="true"
   [rowHeight]="50"
   [headerHeight]="50"
   [footerHeight]="50"
   ></ngx-datatable>

the issue seems to be here: https://github.com/swimlane/ngx-datatable/blob/c3a1ba2e542416ba45fe1b4040db7abebac9ce7b/src/components/datatable.component.ts#L764

What is the motivation / use case for changing the behavior?
It doesn't look good and there's no way to monkeypatch this so the height is calculated correctly.

Please tell us about your environment:

Ubuntu 16.04 LTS

• Table version: 6.0.1

• Angular version: 2.3.0

• Browser: Chrome | Firefox

• Language: TypeScript 2.1.5 (compiling to ES6)

[elvisbegovic]

Me too. But me on desktop my ngxdatable have 100% in height correctly but in iphone table is tooo small ! Weird

[ghost]

I have a workaround, it involves storing a reference to the datatable and then setting its bodyHeight:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { DatatableComponent } from "@swimlane/ngx-datatable";

@Component({...})
export class MyComponent implements AfterViewInit {
  @ViewChild(DatatableComponent) table: DatatableComponent;
  ngAfterViewInit() {
        this.table.bodyHeight = 400;
    }
}

That seemed to work though the scrolling looks strange because it flies through 10 items which don't get rendered. So I'm not sure if that's the correct behaviour but this confirms that the height of the element is incorrect, which propagates to the bodyHeight component input.

[amcdnl]

I use absolute position for sizing -> position: absolute; top:0;left:0;right:0;bottom:0; when I need to make it 100% height.

[ghost]

@amcdnl I will try that as another workaround, is that all of the CSS needed to make that work? no other HTML or Angular code needed?

[finalxcode]

@omouse @amcdnl @istiti +1 this problem still exist, how can i fix it?

"@swimlane/ngx-datatable": "^6.3.0"

[amcdnl]

Can you make a demo?

[jiann4321]

Anyone fixed this? also experiencing the same issue. height on mine is just 20px. downloaded the latest version

[professorjoshua]

Can we create a property for how many rows we can display when using a vertical scroll?

[rajeshvaya]

If we set height of the ngx-datatable like the below example it works - The height has to calculated with header and footer height in mind

E.g.

<ngx-datatable style="height: 439px;"
            class="material"
            [rows]="rows"
            [columnMode]="'standard'"
            [headerHeight]="40"
            [footerHeight]="50"
            [rowHeight]="35"
            [scrollbarV]="true">

The height 439px was calculated to display 10 rows per page as follows:
Header height + Footer height + (Number of rows to display on one page * row height)

Due to the css and font size of your app the header and footer height may increase - inspect the header and footer element through dev tools to get the accurate height.

439px = 38 + 51 + (35 * 10)

[professorjoshua]

Using the height with the vertical scroll creates a bug in my code that I have been unable solve. I use a drop down list to list my data models. When the user names a selection I change the columns and call the API to retrieve the data for the selected model. In some cases there are 4 or 5 rows and in other cases there are hundreds or thousands of rows. When I select a model with 100 rows and use the vertical scroll bar to move down the list slightly, then when I select another model with only a couple of rows then nothing gets displayed. This problem only occurs when I include a CSS for height. However, if I take the CSS for Height off then it works fine but I only get 1.5 rows displayed. Any suggestions?

[sohaibjaved44]

@omouse your workaround works only if the page has one table.

[ghost]

@sohaibjaved44 really? I would hope that it would work if you had multiple tables as ViewChild variables? could you paste the code you're using?

[mlp1802]

When placed in tabs, it doesnt recalculate when switching between tabs. Columns shrinks to 1/10 size..only on mouser over does it recompute. Recalculate() has no effect.

[ghost]

@mlp1802 that sounds like a new issue?

[thomedw]

I think it'd be nice if this workaround position: absolute; top:0;left:0;right:0;bottom:0; by @amcdnl is mentioned in the example. I spent about two days figuring out. :)

[rlarin]

the solution provided by @amcdnl works for me too !!! thanks!!!
position: absolute; top:0;left:0;right:0;bottom:0;

[drewfreyling]

This is still an issue. Any idea why it was closed?