No data to display when [rowHeight]="'auto'" and [scrollbarV]="true"

[mssravan56]

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, post on Stackoverflow or Gitter

Current behavior With [rowHeight]="'auto'" [scrollbarV]="true", the table displays "No data to display"

Expected behavior It should display the table with the data with fluid row height and vertical scroll.

Reproduction of the problem Reproducible 100% of the times.

Please tell us about your environment: Mac, Atom, Angular 5

• Table version: 0.8.x 11.1.7

• Angular version: 2.0.x 5.2.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript 2.4.2

[MuMuthukumar]

From my experience, you can't use [rowHeight]="'auto'" when you have [scrollbarV]="true", you should give some number for rowheight.

[CaffGeek]

Even a number is breaking it for me.

[bleuscyther]

based on here https://github.com/swimlane/ngx-datatable/issues/1292 . i used overflow-y:visible for the rowDetail and its now working

[siba1985]

hi bleuscyther overflow-y:visible is ok but my case, [rowHeight]="'auto'" i am using every row inside column contains more means word-wrap.

[scrollbarV]="true" i am using header fixed and pagination show in top so overflow-y:visible is not required, below is my ngx-datatable example, Dear bleuscyther can you tell me in this case how to use [rowHeight]="'auto'" [scrollbarV]="true"

<ngx-datatable class="material striped" style="height: 340px; " [rows]="myData" [columnMode]="'force'" [headerHeight]="50" [scrollbarH]="true" [footerHeight]="50" [rowHeight]="40" [scrollbarV]="true" [sorts]="[{prop: 'name', dir: 'desc'}]">

[AliZain036]

hi bleuscyther overflow-y:visible is ok but my case, [rowHeight]="'auto'" i am using every row inside column contains more means word-wrap.

[scrollbarV]="true" i am using header fixed and pagination show in top so overflow-y:visible is not required, below is my ngx-datatable example, Dear bleuscyther can you tell me in this case how to use [rowHeight]="'auto'" [scrollbarV]="true"

<ngx-datatable class="material striped" style="height: 340px; " [rows]="myData" [columnMode]="'force'" [headerHeight]="50" [scrollbarH]="true" [footerHeight]="50" [rowHeight]="40" [scrollbarV]="true" [sorts]="[{prop: 'name', dir: 'desc'}]">

This worked for me. Thank You.

[shivajivh]

Any update or work around to this issue? combination of rowHeight auto and scrollbarV true still does not work when we have row detail. I do not need virtual scroll capability, if that is causing the issue, can we disable it and have the scroll?