search

AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

Breaks from Bootstrap 3 to 4 #1481

Closed jtheberge closed 7 years ago

jtheberge commented 7 years ago

With the coming weeks that Bootstrap 4 beta will probably be released (it's at 99% completion), it would be really great to have some minor fixes to make this project reusable with 4.

The main issue with the switch, as stated partly before with #1339, is that icons don't show up because of removed classes such as caret, as well as the replacement of Glyphicons with Font Awesome.

The second issue, though minor, is that the global search bar is no longer in the correct position and gets squished. Probably an easy CSS fix, but something worth noting.

Another important issue is that if I download your examples page but replace v3 with v4, then the navbar disappears unless I manipulate the CSS/play around with the new v4 classes, and the documents aren't laid out correctly.

The images below were used with the "Quick Demo" code provided in the README.md, except search={true} was added to BootstrapTable.

Bootstrap 3: bootstrap3

Bootstrap 4: bootstrap4

780 a pull request was made to fix the icons issue, but after trying to fix it myself with the newer files (and doing essentially the same thing, which was globally replacing Glyphicons with Font Awesome), I still had errors.

1272 asked something similar, but the issues weren't clearly stated so I'm making a specific issue for it.

If icons could at least be fixed initially, then the main components of this repository could definitely be used.

Also worth noting that I downloaded 4.0.0-beta.7 and had the same results as the images above, which used the most recent stable version.

AllenFang commented 7 years ago

@jtheberge, thanks your sharing, I'll try to make react-bootstrap-table more compatible with bootstrap@3 and bootstrap@4, but need some time, so PR is welcome, thanks

iamawebgeek commented 7 years ago

any progress on this?

Suban5 commented 6 years ago

I am waiting for this issue to be fixed. Also there is problem while selecting pagePerSize. The pagePerSize only work if you click in the number but not in that column.

AllenFang commented 6 years ago

@Suban5 if you use bootstrap@4, please add version="4" on BootstrapTable.

AllenFang commented 6 years ago

Remember to upgrade to newest react-bootstrap-table, thanks.