Sort icons/arrows: 3 browsers, 3 results (not on same line, overlapping text, and correct)

burnchar

I've had troubles with the sort arrows looking different in each browser. I'm using JQuery 1.8.1, JUI 1.8.24, DataTables 1.9.3, TableTools 2.1.4.
I messed with it for quite a while and request help at this point.

I looked at: http://datatables.net/forums/discussion/1695/using-jqueryui-themes-sort-icon-row-header-on-separate-lines/p1
But I already include the appropriate CSS and have even inserted .css_right {float:right} into my final CSS include file.

I looked at: http://datatables.net/forums/discussion/604/themeroller-sort-icons-render-on-separate-line#Item_9
But I've included the mentioned CSS files. Allan asks if the column has enough room for all the text -- I don't think it should matter. I think the arrows should never overlap the text; that if they do, the column needs to be generated with greater width.

I looked at: http://datatables.net/forums/discussion/7945/how-to-get-the-sorting-arrows-on-the-same-line/p1
But have tried adding the given CSS and already include "demo_table_jui.css". Of some note is changing that CSS seems to do nothing.

I looked at: http://datatables.net/forums/discussion/11734/sort-icons-are-overlapping-text-in-header/p1
But there are no replies.


The following shows sort icons the same page in IE9 (overlaps text), Firefox 15 (separate line), and Chrome 22 (renders correctly).
http://i.imgur.com/JNgZT.png

The following image shows the HTML in FireBug for one of the sort icons (showing css_right and whatnot):
http://i.imgur.com/X99MC.png

I can't put this page online, but I can provide zip files of HTML output or similar.

My table is generated with:
[code]



@foreach(string column in columns) { @column }






@foreach(string column in columns) { @column }



[/code]

My CSS/JS inclusion order follows. Note that site.css can be eliminated and the problem persists:
[code]





<!-- (More JUI widget includes that probably don't matter) -->






[/code]


The DataTables init code is:
[code]
$('#mainview').dataTable({
"bJQueryUI": true,
"sDom": '<"H"lfr<"br /">T>t<"F"ip>',
"sAjaxSource": "@Url.Content("~/API/MainView")" + "?process=C5N",
"aoColumns": [
{"mData":"DEVICE"},
{"mData":"ROM"},
{"mData":"ECA"},
{"mData":"PROCESS"},
{"mData":"STAGE"},
{"mData":"PARENT_ORDER"},// + "mData":"CHILD_ORDER"}, // "mRender":??? see joined table examplke},
{"mData":"DOSE"},
{"mData":"RECIPE"},
{"mData":"PARENT_RECIPE"},
{"mData":"SPECIES_AMU"},
{"mData":"SPECIES_CHEMICAL_FORMULA"},
{"mData":"SPECIES_COMMON_NAME"},
{"mData":"ENERGY"},
{"mData":"TILT"},
{"mData":"TWIST"},
{"mData":"ROTATION"},
{
"mData":"EQUIPMENT",
"mRender":"[, ].name"
},
{"mData":"RECIPE_NOTES"}
],
"oTableTools": {
"sSwfPath": "@Url.Content("~/Content/DataTables/TableTools/copy_csv_xls_pdf.swf")",
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copy to clipboard",
"sTitle": reportTitle + utcOffsetText
},
{
"sExtends": "csv",
"sButtonText": "Save as Spreadsheet",
"sTitle": reportTitle + utcOffsetText
},
{
"sExtends": "pdf",
"sPdfMessage": pdfMessage,
"sButtonText": "Save as PDF",
"sPdfOrientation": "landscape",
"sTitle": reportTitle
},
"print"
]
},
"oLanguage": {
"sSearch": "Search within results:"
},
"sPaginationType": "full_numbers",
"iDisplayLength": 15, // Initially display this many rows
"aLengthMenu": [
[15, 42, 100, -1],
[15, 42, 100, "All"]
],
"aoColumnDefs": [
{ "sType": "scientific", "aTargets": [6] }, // Sort Dose as scientific notation
{"bSearchable": false, "aTargets": [5, 6, 10, 11, 12, 13, 14, 15] }
]
});
});
[/code]

What should I look at next?

allan

This CSS from thread 7945 is actually included in the default DataTables jQuery UI CSS file:

[code]
/*
* Sort arrow icon positioning
*/
table.display thead th div.DataTables_sort_wrapper {
position: relative;
padding-right: 20px;
padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
[/code]

and it should make the float:right redundant.

I've just tried this and a few variations on the table width to try and force it to break, but it appears to be working as expected for me (Safari, Chrome, Firefox and IE8/9.

> I can't put this page online, but I can provide zip files of HTML output or similar.

If you can drop me a working example that would be very useful.

Allan