Sort Icon Positioning Help (CSS)

Sandi2525

Libraries:
Bootstrap v4.3.1
jQuery v3.3.1
DataTables v1.10.18 (w/ Bootstrap4 integration)

Library CSS:
dataTables.bootstrap4.min.css

I'm currently having an issue with inconsistent placement of the sort icons in the table header (<th>) for screen sizes smaller than 1920x1080. The sort icons appear as follows for screen sizes 1920x1080:

When I change the screen size to 1366x768 the sort icons appear as follows:

Preferably, I'd like the icons to always align vertically in the middle of the cell (inline with the text). Though I have changed the icons via CSS (copied below), I've noticed that this seems to be a problem for the default sort icons with the default CSS as well. Has anyone else run into this issue and resolved it?

Custom CSS:

/* Datatables sort icons */
table.dataTable thead .sorting::before, 
table.dataTable thead .sorting_asc::before, 
table.dataTable thead .sorting_desc::before, 
table.dataTable thead .sorting_asc_disabled::before, 
table.dataTable thead .sorting_desc_disabled::before {
    right: 0.5em;
    /* Up arrow */
    content: "\25B2";
    bottom: 17px;
}

table.dataTable thead .sorting::after, 
table.dataTable thead .sorting_asc::after, 
table.dataTable thead .sorting_desc::after, 
table.dataTable thead .sorting_asc_disabled::after, 
table.dataTable thead .sorting_desc_disabled::after {
    /* Down arrow */
    content: "\25BC";
    bottom: 5px;
}

/* Active sort icon */
table.dataTable thead .sorting_asc::before, 
table.dataTable thead .sorting_desc::after {
    color: #9c5c1c;
}

Thanks in advance for any help offered!

colin

Hi @Sandi2525 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin