Sort icons of nested tables are hidden by CSS

Sort icons of nested tables are hidden by CSS

pgerundtpgerundt Posts: 90Questions: 13Answers: 2

When having a scrollable dataTable with nested dataTables, the inner table does not show any sort icons.

In the bootstrap CSS file
https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.css
the icons are set to display:none:

div.dataTables_scrollBody table thead .sorting:before,
div.dataTables_scrollBody table thead .sorting_asc:before,
div.dataTables_scrollBody table thead .sorting_desc:before,
div.dataTables_scrollBody table thead .sorting:after,
div.dataTables_scrollBody table thead .sorting_asc:after,
div.dataTables_scrollBody table thead .sorting_desc:after {
  display: none;
}

but the CSS selectors should be

div.dataTables_scrollBody > table > thead .sorting:before,
div.dataTables_scrollBody > table > thead .sorting_asc:before,
div.dataTables_scrollBody > table > thead .sorting_desc:before,
div.dataTables_scrollBody > table > thead .sorting:after,
div.dataTables_scrollBody > table > thead .sorting_asc:after,
div.dataTables_scrollBody > table > thead .sorting_desc:after {
  display: none;
}

so the inner dataTables are not affected.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    Thank you! I'll get that committed in for the next release.

    Allan

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Just to say, that is the change committed in.

    Regards,
    Allan

Sign In or Register to comment.