search

olifolkerd / tabulator

Interactive Tables and Data Grids for JavaScript
http://tabulator.info
MIT License
6.71k stars 818 forks source link

If tabulator starts inside a <DIV> with style ="Display;None;" Virtual Dom scroll bars are not visible #514

Closed bluedog closed 7 years ago

bluedog commented 7 years ago

If tabulator starts inside a DIV style = "display;none;" - after show(), setData and redraw the virtual dom scroll bars never appears. This is in context of a single page app with several tables with only 1 or 2 shown at a time.

tab_displaynone.zip display_none_2

bluedog commented 7 years ago

Also, if you change the field "seq" to visible=false the virtual dom scroll bar appears but the header is missing the two previous columns.

display_none_headers

olifolkerd commented 7 years ago

Hey,

If you create your table on a hidden element you will need to call the redraw function when the table becomes visible to ensure it is displayed correctly:

$("#example-table").tabulator("redraw", true); //trigger full rerender including all data and rows

This is because elements have no height or width until they are made visible in the DOM so Tabulator cannot calculate the values needed to render the table correctly unless it is visible.

Cheers

Oli