Question

The Datatables sort icon, on column headers, by default appears under the column header text. I’d like to have this appear on the same line and on the far right side or far left side of the header cell.

Here’s how the HTML for one of the column headers appears (in Firebug).

<th class="ui-state-default" rowspan="1" colspan="1" style="width: 252px;">
    <div class="DataTables_sort_wrapper" style="text-align: left;">
        Account Name
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
    </div>
</th>

I added display: inline-block; to the css-right class on the <span> to force it to appear on the same line as mentioned here and here. However, I still can’t find how to force the icon to appear on the far right or the far left. Adding float:left; or float:right; bumps the icon to the next line.

Any ideas?

Answer 1

I don’t know if this is the best way, but here’s what I see in my jQuery-UI DataTable for that symbol:

From the site’s main stylesheet (not part of the jQuery UI stylesheet):

.display thead th .DataTables_sort_wrapper span { float: right; }

From the jQuery UI CSS file:

.ui-icon { 
  display: block; 
  // ... some other stuff including overflow: hidden 
}

There are some other styles of course, but I think those are the ones that matter. Based on your question, I’m surprised it’s not already working for you.