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

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

ericlatericlat Posts: 14Questions: 2Answers: 0
edited October 2012 in Bug reports
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!

Replies

  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    put

    .css_left { float: left; }

    and

    .css_right {float: right; }

    in the styles of your page.
  • ericlatericlat Posts: 14Questions: 2Answers: 0
    edited October 2012
    [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]
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    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.
  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin
    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_kruegers_krueger Posts: 1Questions: 0Answers: 0
    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 :-(
  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin
    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
This discussion has been closed.