sort icon pushes into next column header

louking

I've looked at https://www.datatables.net/forums/discussion/27515/sort-icon-next-to-column-name which seems to be inconclusive for when jqueryui is being used. The last comment there suggests that this should work by default, and shows example of it working. In that example, the "Name" is not wrapped by a <div>, but in my test the column header text is -- not sure if that is impacting my result.

My example can be seen at http://sandbox.steeplechasers.org/scoretility/_teststandings/, using 1.10.10

<div class="DataTables_sort_wrapper">
   <div class="_rrwebapp-class-standings-data-name">Name</div>
   <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
</div>

Inspecting the icon, I see it is styled by

div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -18px;
}

I think the right: -18px puts it to the right of the column header, but also I can't tell if the icon is accounted for in the widths of the columns. It doesn't seems so.

Update 1: I verified that if I change to right: 0px that icon is moved to right side but within column heading. It definitely seems like the width of the icon is not accounted for somehow in the column width, as when I do this the icon overlaps some of the text fields.

louking

So does anyone know a way to configure datatables such that the sort icon can be included in the column width calculation?

allan

Thanks for the link. Unfortunately it appears to be offline at the moment, but I'll try it again later on.

I was aware of this issue with old versions of the jQuery UI integration for DataTables but had thought it had been resolved with the position: absolute span. Apparently not. I'll take a look at your test page when it is back online.

Allan

louking

Test page is now back online - sorry for the inconvenience

allan

No problem - thanks for bringing it back up (don't you just love server maintenance... :-) ).

The wrapping issue is being caused by this override style in style.css:

table.DataList td, table.DataList th, table.DataList tbody td, table.DataList thead th {
    padding: 1px;
}

Try changing it to be:

padding: 1px 18px 1px 1px;

You'd also need to remove the "workaround" style that was added:

table.dataTable thead th div.DataTables_sort_wrapper span {
   right: 0px;
}

Allan

louking

Thanks. I will implement this as a workaround.

This change has the side effect of shifting any centered cell data to the left a bit in the table, and if there is no sorting I assume the centered table headers will appear shifted as well. If you look at the updated test page you can see the impact to the cell data.

I will look to see if there is a way to detect that the table has sort icons, and perhaps only apply the 18px right side padding to the headers if sorted as well as 9px left 9px right for the data cells.

I'll also see if I can remove my DataList class, or cut it down to bare essentials as this seems to be competing with the dataTable class.

allan

perhaps only apply the 18px right side padding to the headers

I think that would be the correct way to do it. I'll look into the stylesheet options for the default file.

Allan

louking

I think that would be the correct way to do it. I'll look into the stylesheet options for the default file.

I'm sure you know the method I suggest needs to be limited to centered cells

see if there is a way to detect that the table has sort icons, and perhaps only apply the 18px right side padding to the headers if sorted as well as 9px left 9px right for the data cells

A quick inspect of the table cells shows that while the th elements have a "sorting" class which I think was added by datatables, there no indication at the td elements within the columns which have sorting.

I'll do the research but I'm not sure if it's possible to have the td element's css know about its associated th's classes, which could be used to make a decision on the left/right padding (i.e., more padding when sorting).

From this perspective, it'd be "nice" if dataTables annotates the td elements with "sorting" class (or not). Not sure if there'd be any performance impact, though.

allan

Changing class names is always a performance drag since it requires DOM updates and that's about the slowest thing you can do in a web-browser. Having said that, DataTables does already use a number of different classes.

However, I'm not quite sure I understand the issue I'm afraid - would something like this not work well:

table.DataList thead th.sorting,
table.DataList thead td.sorting {
    padding: 1px 18px 1px 1px;
}

That would only effect the cells in the header with a sorting icon.

Allan

louking

No it was my mistake. I've now removed the DataList left and right padding and am using the dataTables defaults, which look fine.

Thanks for all your help for this.