Question
text overlap after
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'
If remove this import, there will be no sort icon shown up.
How to correctly show icon and avoid text overlap at the same time?
codesandbox
https://codesandbox.io/s/react-bootstrap-table-2-ii9g8
Hi the import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' it's not necessary, but the missing sort icons seem to be a bug, I didn't found the root cause yet, but you can use this workaround for now.
th .order-4:before {
margin-left: 3.5px;
content: "\2191";
opacity: 0.4;
}
th .order-4:after {
content: "\2193";
opacity: 0.4;
}
th .caret-4-asc:before {
margin-left: 3.5px;
content: "\2191";
}
th .caret-4-asc:after {
content: "\2193";
opacity: 0.4;
}
th .caret-4-desc:before {
margin-left: 3.5px;
content: "\2191";
opacity: 0.4;
}
th .caret-4-desc:after {
content: "\2193";
}
Most helpful comment
Hi the
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'it's not necessary, but the missing sort icons seem to be a bug, I didn't found the root cause yet, but you can use this workaround for now.Here a example
