search

react-bootstrap-table / react-bootstrap-table2

Next Generation of react-bootstrap-table
https://react-bootstrap-table.github.io/react-bootstrap-table2/
MIT License
1.27k stars 431 forks source link

text overlap after import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css' #1301

Open AliceChang-99 opened 4 years ago

AliceChang-99 commented 4 years ago

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

Ymbere commented 4 years ago

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

Here a example Edit sortIconsWorkAround

radubartan commented 2 years ago

This is what worked for me.