when bJQueryUI=true, the sort indicator wraps to the next line

vazavi

When I use
[code]
$('#business_units').dataTable({
"bJQueryUI": true})
[/code]
the sort indicators appear on the next line. I figured out that it happens because the indicators are effectively rendered as . For now, I was able to fix this by wrapping each header text with and fixing the width of these additional divs using js, like so:
[code]

$(function() {
$('#business_list').dataTable({
"bJQueryUI": true
});

$('.DataTables_sort_wrapper div').each(function() {
$(this).width($(this).parent().innerWidth()-30);
});
});





Name
Industry
Active



....


[/code]

This behavior seems like a bug to me. However, I wonder if maybe I missed something and this is an intended behavior?

CHgsd

Interestingly I ran into this same problem, and several other oddities as well. After trying your solution and unsatisfied with the results in my application, trying to implement my own, I found that the solution is incredibly simple.
If you are using the demo_table_jui.css file, apply the .display class to your table, ie: in your case.
Try removing your changes (including floats) and seeing if that class solves the problem. It did for me and fixed a ton of other things I was trying to achieve in one simple step.
I think the docs should maybe mention this.

Cheers,

CHgsd

allan

The default display classes are something I want to make a lot clearer in the next major version of DataTables (1.8). I'll be changing a lot of the class names in order to make styling clearer and more readily modifiable - but yes, 'display' is the class that I've used in all of the examples. Adding that, and importing the default style sheets, will give you the same basic styling as my demo tables.

Allan

CHgsd

@Allan,

Thank you very much, once I figured that out most of my formatting problems just disappeared. Without that class, getting the sort icons on the same line as the headers is quite difficult, or at least proved so for vazavi and myself. I haven't read through your classes yet to see what magic you invoked, but it is brilliant and works!

Cheers,

CHgsd

lucasnp

@Allan,

Even with class display, the sort icons still not 'center align' in IE6. It's fine to me, but just so you know it's not working properly in IE6.