React-table: Better support for flex-box-impaired browsers

Created on 30 May 2017 · 7Comments · Source: tannerlinsley/react-table

Problem Description

This is not supported in IE11.

Can we add support for this? Thanks.

Source

Lilmortal

👍4

Most helpful comment

But @hermith you are right!

.ReactTable {
  display: block;
}

This fixed it.

But it will be nice that we don't have to do this manually in the future.

Lilmortal on 30 May 2017

👍6

All 7 comments

It seems one of the more recent versions broke the table in IE11 (we had issues in mobile Safari on iOS as well). There are some issues with display flex on .ReactTable. Overriding it to display: block will make it work, but not sure if this causes any issues with other functionality (like the loading element).

karl-run on 30 May 2017

Maybe we could try and get a browserstack example of this so we can reproduce the errors that need to be fixed? https://www.browserstack.com/

tannerlinsley on 30 May 2017

It seems one of the more recent versions broke the table in IE11 (we had issues in mobile Safari on iOS as well). There are some issues with display flex on .ReactTable. Overriding it to display: block will make it work, but not sure if this causes any issues with other functionality (like the loading element).

@hermith that is because flexbox isn't 100% supported in IE11. see here

mikedevita on 30 May 2017

@Lilmortal Can you provide more information on what isn't working. Is it a purely CSS issue? There may be some ES6 functions used that may need to be polyfilled in IE11. Are you getting any console errors?

aaronschwartz on 30 May 2017

Hi @aaronschwartz, it is purely a CSS issue. The table is not displaying at all, but the "Previous" and "Next" button shows up. There are no console errors.

Here is what it looked like on IE11, ignore that "Refine my search" button. I reduced my browser width that's why the components looked jumbled up; but the main point is the actual table is not there.