Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-table not working in chrome / Css-Problem?

See original GitHub issue

What version of React-Table are you using?

react-table 6.5.3 react: 15.6.1 webpack: 3.4.1

What bug are you experiencing, or what feature are you proposing?

react-table looks good in Mozilla, Edge and IE, but not in Chrome (61.0) I have taken the exact same code as in this example: Simple Table and haven`t modified anything here. I haven’t added, modified or changed the code.

I can see the pagination-bottom div, but not the <div class=rt-table>. It seems that the div class=rt-table is only 1px in size above the pagination-bottom div. (Css problem?)

A picture how it looks in Chrome

In the console: I don`t get an error in the console of chrome, and I see the data in the table.

I have no idea why the div rt-table doesn`t show up. I have also tried to set a fix height:

 style={{
height: "800px" // This will force the table body to overflow and scroll, since there is not enough room
 }}

I have also tried to change the import css to the old style: import “react-table/react-table.css”; -> <link rel="stylesheet" href="node_modules/react-table/react-table.css">

Nothing changed

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:35 (13 by maintainers)

Top GitHub Comments

2reactions

jbencecommented, Oct 7, 2017

I am able and willing.

I have boiled down the HTML and CSS to a single file that exhibits a difference in behavior between FireFox and Chrome, and submitted that as an issue through the Chrome settings tab. There are four CSS attributes (two in .ReactTable, two in .ReactTable.rt-table) whose presence triggers the squashed table in Chrome. Remove any one of them, and the table shows up.

Perhaps they will reply sooner rather than later, since the example is focused. In the meantime, I will look for a minimal set of changes to make things work in multiple browsers (I’ll overcome my reluctance to use Edge for some testing).

1reaction

benwindingcommented, Jan 31, 2018

As suggested, this is fixed by adding <!DOCTYPE html> to the top of the index file!

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
  <body>
    <div id="root"></div>
    <script src="build/bundle.js"></script>
  </body>
</html>

This made the pagination render correctly for me!!