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

[Paul6552]

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"; ->

Nothing changed

[Paul6552]

I can fix the problem if i modify one div:
<div class="-pagination" style="height:40px;">

So it seems that class -pagination doesn`t have a height set. Can anyone confirm this?

[gary-menzel]

I'm using it perfectly fine in Chrome 60.0 (using the import "react-table/react-table.css".
I hope it is not something strange they have done with Chrome 61.

[gary-menzel]

Well - it was working in Chrome 60 and I have just updated to Chrome 61 - everything is working fine on my code (and in all the react-table examples). So it must be something in your build environment that is the issue.

[jurasource]

@Paul6552 I've got almost the same problem, but that div hack doesn't work for me. Let me know if you figure it out.

[Paul6552]

@gary-menzel
What build environment do you have?

My package.json:

{
  "name": "meins",
  "version": "1.0.0",
  "description": "Great Project ;-)",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.0.0-alpha.6",
    "node-rest-client": "^3.1.0",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-transition-group": "^15.6.0",
    "react-table": "^6.5.3",
    "namor": "^1.0.1",
    "material-ui": "^0.19.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "reactstrap": "^4.8.0",
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "style-loader": "^0.18.2",
    "webpack-dev-server": "^2.5.0"
  },
  "scripts": {
    "__comment": "Wenn du node_modules löscht führe npm install durch ",
    "build": "webpack --config webpack.config.js",
    "test": "webpack-dev-server --content-base dist --hot"
  },
  "keywords": [],
  "author": "Me",
  "license": "ISC"
}

Webpack config:

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR
  },
  devtool: "#eval-source-map", //auskommentieren wenn es produktiv geht, nur zum Debuggen
  module : {
    //Paul, merk dir einfach dass module->loaders das alte ist und module->rules das neue
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test : /\.js?/,
        include : APP_DIR,
        exclude:/(node_modules|bower_components)/,
        loader : 'babel-loader',
        query  :{
            presets:['react','env']
        }       
      }   
    ]
  }  
};

[gary-menzel]

I am building on the Meteor platform - so not using webpack to do the build. However, but it still uses babel to do the loading. I've also not experienced any of the issues you've described with the codesandbox sanples. So I was suggesting that maybe something isn't getting loaded by your builder if those work on Chrome OK.

Have you checked to see if there are any errors in loading the bundle or associated files ? If the react-table.css is getting loaded, maybe there is a conflict with some other CSS. I will say that I am using bootstrap 3 (and not 4). There could be some conflict there.

[Paul6552]

Sadly I haven`t any errors in the console.

Also when I build a complete new project without not needed packages it isn`t working.

Package.json

{
  "name": "meins",
  "version": "1.0.0",
  "description": "Great Project ;-)",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "react": "^15.6.1",
    "react-table": "^6.5.3",
    "namor": "^1.0.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "style-loader": "^0.18.2",
    "webpack-dev-server": "^2.5.0"
  },
  "scripts": {
    "__comment": "Wenn du node_modules löscht führe npm install durch ",
    "build": "webpack --config webpack.config.js",
    "test": "webpack-dev-server --content-base dist --hot"
  },
  "keywords": [],
  "author": "Me",
  "license": "ISC"
}

Maybe here are people around working with webpack and react-table?

[Paul6552]

I have found more people having this problem in this issue. I don`t know why this ticket is already closed although there are people outside having this problem:
Ticket issue 351,
Ticket issue 304
Ticket issue 316 (exactly my problem)

Display:block didn't fix the problem for me :-/

[gary-menzel]

This ticket is not closed but, if you read through those other tickets, the code has been tested across a wide range of browsers and platforms and behaves as expected. You need to find a tool (like codesandbox, codepen, etc. etc.) that can replicate the problem reliably. It is really difficult to "fix" something that isn't repeatable in a controlled environment.

The other option is to fork the code yourself and see if you can maybe it "break" that way and then either submit a PR or explain how to reproduce the problem.

[Paul6552]

"You need to find a tool (like codesandbox, codepen, etc. etc.) that can replicate the problem reliably. It is really difficult to "fix" something that isn't repeatable in a controlled environment."

I think in this case the fault is the environment. I can go to the samples of react-table and see the table. You are telling me that everything is working as expected with Meteor, so I think the problem is webpack, the settings of webpack, the included packages or the behaviour of the included packages.

On the other side I have two css changes that fixes the problem in chrome:
Add a height value to the class .ReactTable .-pagination and remove flex:1 or change flex:1 to flex: auto in .ReactTable .rt-table

First I set only the height, but then if I expanded a row the subrow didn't show.
But after I changed flex it worked.

Fixed css classes:

.ReactTable .-pagination{height:50px;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:3px;box-shadow:0 0 15px 0 rgba(0,0,0,0.1);border-top:2px solid rgba(0,0,0,0.1);}

.ReactTable .rt-table{-webkit-box-flex:1;-ms-flex:1;flex:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;border-collapse:collapse;overflow:auto}

For testing purposes I removed also the flex:1 on the samples page react-table example. Everything stays the same, so what does flex:1 do?

Can we change it to flex:auto or remove it in the next release and set a height(!) in the -pagination?

//EDIT
I think flex: 1 has a different behaviour in chrome and in mozilla firefox.
For example:
Different behaviour in IE10
Look in the chapter: "The default flex value has changed"

Although the article wrote about IE10 and a different behaviour with the shorthand flex:1 you can find many articles on google with the same difference in mozilla and chrome.
So IF flex:1 is important we should rewrite it in flex: 1 1 auto or flex:auto

[gary-menzel]

@tannerlinsley have you experienced this with any particular webpack configuration of react-table? I realise this looks like a duplicate of other tickets that have been closed but if something can be "fixed" generically in react-table then it might be worthwhile.

@Paul6552 I still admin though that I doubt the flex parameters are changing due to the build environment. It must be some CSS that is getting included that is adding some type of "default" table CSS which is causing this to happen. Which may mean looking at the flex attributes could resolve it. It still needs to be repeatable and testable in some way though.

[strong0588]

react-table works perfectly when running on webpack. However, experiencing the same issue once I try to switch the project to production and load the project with express and server side rendering very very wierd

[gary-menzel]

In that case, if webpack is not involved with production, you need to check that the react-table.css is getting loaded properly and that the order of your CSS loading isn't somehow trashing some core layout functionality.

[EntropyInfinita]

If it is any help I'm experiencing the same problem with Version 60.0.3112.113 (Official Build) (64-bit) when using the CDN.

[Paul6552]

I have now compared everything (chrome with mozilla, codesandbox with moz and chrome, codesandbox with the css in the folder react-table). I haven`t found any different css file from reac-table. I have also tried with normalize.css but no different behavior.

I use npm css-loader so I tried to chang the behaviour for that with extract-loader (so that the css is not bundled in a JS file). No difference.

Anyone who has the same problem: Could you fix the problem with my suggestion? (Post nr. 11)

[jbence]

I was able to fix the problem using the suggestion in post no. 11 from @Paul6552

I am serving the HTML from an EJS template using express. Because I was having difficulty, the EJS template was stripped to the bare minimum: the only CSS file loaded is the one from react-table; the only JS file loaded by the template is the one created by webpack. If I load the jsx file into codesandbox, it works OK, but on my laptop, without the CSS fixes, the pagination buttons take up the entire screen.

I'm using Chrome Version 61.0.3163.100 (Official Build) (64-bit)

An earlier post mentioned

It must be some CSS that is getting included that is adding some type of "default" table CSS which is causing this to happen.

Could it be the opposite? In other words, when one uses something like codesandbox, CSS gets included that fixes the issue? And here, where I have a page that loads only 3 resources: the page itself, one CSS file (taken directly from the node_modules folder for react-table), and one JS file (compiled by webpack), the pagination buttons absorb all of the space?

[gary-menzel]

I don't think it is something that codesandbox is including. I am using a completely different build system (MeteorJS) and ReactTable has worked perfectly fine for me from the beginning in both development and production.

Are you specifying a height for your containing div (or a parent)? I have seen that being an issue.

[jbence]

If I am, I am unable to find where it is being specified. The react-table component is the only element on the page. I've gone over the CSS in Chrome's developer tools panel several times.

[jbence]

Let's leave webpack and react out... and just look at some HTML left behind. I've stripped out the pagination section, leaving just one column and one row of data. In the file shown here, the entire table is 2 pixels high. The structure of the table is shown: one column, and one row of data. I've expanded all of the HTML elements, so the entire file is visible.

There is no javascript at play here. Now take this same file of HTML, and the react-table CSS file, and go over to CodePen, and load them in. The table is displayed correctly.

I will be the first person to point at my local setup as the problem. But when the example is boiled down this far, it certainly appears that the presence of "flex: 1" in the ".ReactTable .rt-table" CSS block is causing a problem unless one happens to be working in CodePen, CodeSandbox, etc.; that is, in an environment where additional CSS is present (bootstrap?, etc.), so that "flex: 1" does not squash the table.

This appears to be specific to recent versions of Chrome (58+), as the latest version of Firefox renders the above HTML as expected, displaying the entire table.

Now, is this a Firefox bug, and Chrome is doing what's right, or is it the other way around? It doesn't seem like a react-table problem, it is more a browser issue, and there is the work-around in the post from @Paul6552 above. So closing this issue seems OK to me, and the posts here will be available while Firefox and Chrome render the above differently.

[gary-menzel]

I'm tagging @tannerlinsley here before closing as @jbence has fully identified what the problem seems to be and Tanner might be able to make the final call on if a fix will go in or it will just be closed.

[gary-menzel]

@jbence I spoke with Tanner regarding this and he'd be happy to accept a PR to change the CSS. Given you seem to have narrowed it down are you able (or willing) to do some more cross-browser testing to check that FF and Chrome can share the same CSS and then submit a PR with the change?

The other option is that I am happy to put up an FAQ in the Wiki to explain (briefly) what the fix should be for people experiencing it.

[jbence]

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).

[lindslev]

fwiw i'm still seeing the problem reported above using the cdn styles because css modules were too much trouble for my project. i'm experiencing the issue in safari, chrome, and firefox. can't see anything in the table. def frustrating, prob gonna have to pass on a great component b/c of some glossed over css bug :{.

[gary-menzel]

If you look up a few posts ago, @jbence is looking into creating a PR for what he has found in regard to this issue. It is a difficult issue to understand because it is working flawlessly for so many other people but @jbence thinks he may have tracked it down. You might want to put a watch on this thread to see it becomes resolved in the future. Or you might want to see if the suggested solution can work for you temporarily by maintaining your own local copy of the CSS file.

[lindslev]

yo @gary-menzel thanks fro the fast response. yeah i've read through all the issues - my project is just a bit rushed (hence the last bit of my comment), and i really would love to use it because it looks great and does just what i need.

it's not clear to me what the suggested solution is. could you link to a known working css file in the repo, any lines that need to be changed, and/or a specific comment where this suggestion was made?

[gary-menzel]

@lindslev There is a post above (about 16 days ago by @Paul6552 )

https://github.com/react-tools/react-table/issues/496#issuecomment-331565802

That has some suggested CSS that had some results in what he had been testing. I have not actually been working on it - just keeping it moving towards a solution, so to speak. You may try to contact @jbence directly (or he may pipe in with what he is thinking).

From what I can tell it is something to do with the top-most element CSS that uses flex and it requires a small change. I've done nothing with it as I have not experienced the issue at all (unless I don't include the react-table.css).

[jbence]

Based on a response over in one of the chromium forums, this can be resolved by making sure that the first line of the HTML document is:
<!DOCTYPE html>

This triggers a strict mode of interpretation for the document. Without the line, the browser is using quirks mode. The various browsers should treat quirks mode the same, and a suggestion was made to open a bug report on the chromium project, which I will.

But adding the above line to the generated HTML document that includes a React Table, makes the rendered page look OK in Chrome 61. This addresses both the pagination buttons taking up the screen, as well as the overall height of the displayed rows being set around 2 pixels. @lindslev

[gary-menzel]

That explains why it has always been working for me. My doctype is always <!DOCTYPE html>.

@jbence Based on your response, do you think that means we can close this issue ?

I'll add an FAQ to the wiki here (at least as a suggestion to try the doctype solution).

[jbence]

Yes, I think issue can be closed; thank you for the FAQ update. I'll still post the bug as suggested in the chromium forum, but that is independent of this.

[lindslev]

awesome, thanks @jbence and @gary-menzel and everyone 👍

[gary-menzel]

The FAQ on the wiki has been updated with the suggested solution. This issue is now being closed.

https://github.com/react-tools/react-table/wiki/FAQ#my-reacttable-doesnt-seem-to-display-properly-on-browser-x---help

[Paul6552]

I checked it also and found out that I didn't have a doctype. I thought in HTML5 that wouldn't be needed anymore (only <html> ...</html> and the html5 semantic elements). Copied the Doctype in it and everything worked. :-)

Thank you @jbence and @gary-menzel for your work!
This is such a great table

[benwinding]

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!!

[tandasima]

Thank you all. Adding <!DOCTYPE html> worked for me too.

[tmulroy]

Not sure if this is related, but I followed the webpack css loader docs here and it broke the table, but if you take out
options: { modules: true }
it renders the react-table.css correctly