Using jQuery UI themes Sort icon appears on New line after header text

ericlat

It looks like there are a several solutions to this posted over the years in the forums here, but none seemed to be a absolute fix-all solution. However, after trying lots of different things I found a work around that seemed to work for most major browsers (including older versions of IE) and I thought I would post my solution since it was a very annoying bug. Maybe the developers can explain WHY it works and possibly implement this in an update and hopefully this will help someone else out in the future.

I first added this to my css:

[code]
.DataTables_sort_wrapper { white-space: nowrap; }
[/code]

This worked on some browsers but not all (Firefox was still wonky).

In jquery.dataTables.js version 1.9.4 line 1080 is this section of code:

[code]
/* Add the extra markup needed by jQuery UI's themes */
if (oSettings.bJUI) {
for (i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
nTh = oSettings.aoColumns[i].nTh;

var nDiv = document.createElement('div');
nDiv.className = oSettings.oClasses.sSortJUIWrapper;
$(nTh).contents().appendTo(nDiv); /* <----- MOVE THIS LINE */

var nSpan = document.createElement('span');
nSpan.className = oSettings.oClasses.sSortIcon;
nDiv.appendChild(nSpan);
nTh.appendChild(nDiv);
}
}
[/code]

I simply changed the line $(nTh).contents().appendTo(nDiv); to follow nDiv.appendChild(nSpan); Like this:

[code]
/* Add the extra markup needed by jQuery UI's themes */
if (oSettings.bJUI) {
for (i = 0, iLen = oSettings.aoColumns.length; i < iLen; i++) {
nTh = oSettings.aoColumns[i].nTh;

var nDiv = document.createElement('div');
nDiv.className = oSettings.oClasses.sSortJUIWrapper;

var nSpan = document.createElement('span');
nSpan.className = oSettings.oClasses.sSortIcon;
nDiv.appendChild(nSpan);

$(nTh).contents().appendTo(nDiv); /* <-----MOVE THIS LINE TO HERE */

nTh.appendChild(nDiv);
}
}
[/code]

What this is doing is building the div element, appending the span element, THEN adding the contents/text of the header in that order. For some reason adding the text before appending the span element renders the markup of the span element on a new line.

Implementing these changes seemed to fix the problem in Chrome, IE7+, and Firefox. Hope this helps!

robertbrower

put

.css_left { float: left; }

and

.css_right {float: right; }

in the styles of your page.

ericlat

[quote]
put

.css_left { float: left; }

and

.css_right {float: right; }

in the styles of your page.

[/quote]

This didn't work for me. Thanks, though. I think the problem there is the header text isn't wrapped in its own element and I don't see a .css_left class assigned to anything here. The structure looks like this:

[code]

Header Text

[/code]

robertbrower

I'd say it's the width 114px that is causing it. I would set the widths of the columns using the appropriate options of datatables instead of in your markup.

allan

Can you link us to a page which shows the issue - that way we will be able to say for sure what the problem is. There have been a number of threads raised over this issue over the last 4 years, and the DataTables default CSS should be able to cope with it now, but it is possible you've hit a case where it doesn't work and we'd need a link to the page to see what exactly is happening.

Allan

s_krueger

When I try to apply this fix, the order changes, but there are still two lines :-(

Image here: http://s7.directupload.net/images/121108/4c88zmlq.jpg

Without the fix, it's just the other way around.

Btw: It seems to me as though there is some margins missing with the search box and the labels on the left, although I have no custom css, only the dataTables and JQuery UI css :-(

allan

As I noted before - please give us a link to a page showing the problem. The default CSS should be able to cope with this and without a demonstration showing the bug that we can debug we are just blindly shooting in the dark and won't be able to offer any help I'm afraid.

Thanks,
Allan