wenzhixin
How can I change the arrow PNG color when a column is sorted?
Description
I want to know if it is possible to change the little blue triangles used when a column is sorted without overwirtting it through CSS.
I'm refering to this one (e.g.):
.bootstrap-table .fixed-table-container .table tfoot th .asc, .bootstrap-table .fixed-table-container .table thead th .asc { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==); }
Example(s)
No response
As you already found out, the image is within the CSS, so you can't configure it. But you can overwrite it through you're own CSS, but you wrote you don't want to do that. What is the reason for that ?
Well, basically is because I prefer to mantain my CSS as simple as I can; and I'm delighted with your option to customize the datatable buttos (data-buttons-class="my-css-classes") and I was wondering why we're not doing the same with the sort icons (with something like "data-sort-icon-up" and "data-sort-icon-down" and the caret PNG is only used by default) It makes sense for you?
Thank you so much for your attention and for considering my request.
I'm not sure if we should spend time on that feature (request), as you already have the option to overwrite it with custom css.
It seems this is a edge case, as the most users will not need custom caret's.
I'm fine with marking this issue as feature request, as this is a nice to have thing. But then it would have very low priority.
@wenzhixin What do you think ?
@UtechtDustin, I agree with your point but find this issue quite interesting.
So, I spent some time researching how to replace PNG with SVG and learning how to draw SVGs.
Once this is implemented, it becomes easy to set colors through CSS.
PR: https://github.com/wenzhixin/bootstrap-table/pull/7417
An example changed the color to green: https://live.bootstrap-table.com/code/wenzhixin/17945
@wenzhixin i guess you're example is broken, the caret ist to huge.
Also i'm not sure if that is good way to solve the issue, we should change the carret so we can change the color by background-color and/or data attribute.
Passing a new/modified svg is just a replacement not a feature, before we also could overwrite the png.
I will check what the issue is. For now, replacing it with SVG has optimized some clarity, which can improve the image resolution.