Themeroller -- Sort Icons render on separate line

mcslayton

Every visible column in my datatable has its sort icon displaying on a separate line -- otherwise everything is functional and properly themed? I've tried multiple themes (Redmond, Smoothness, etc.) to no avail.

BTW, the sort icon is right justified immediately under the column name.

Any ideas how I can fix this?

allan

Hi mcslayton,

It sounds like you just need a "float:right" on the icon element. I added a css class of "css_right' to do this in my examples. If you inspect the element with Firebug (or whatever your development tool of choice is...) you'll be able to see this style applied.

Regards,
Allan

mbini

I still see this behaviour using firefox 3.0 and firefox 2, while firefox 3.5 seems ok. Even on official test pages such as http://datatables.net/styling/themes the sort arrow is placed on a line of its own.

Note that the arrow it's right-aligned (on its own row) and firebug shows the css_right class for the .

Any ideas on possible workarounds?

mkarlsson

I had the same problem with IE6 and IE7. I solved it by using:

Column header

Note that you can't use a since Datatables then automatically adds the JQuery UI icon classes to it.

Regards,
Martin

gotroot

I just downloaded the latest version v1.5.4 and also have the sort icons showing on a different line.
I also have the search and pagination showing on top of each other instead of side by side.

allan

Hi gotroot,

Did you add the css_right right declaration as noted in my post above. Also, is there enough room in the column for the icon element to be positioned to the right (i.e. the text isn't to long and takes up the whole space available)?

Regards,
Allan

l0c0luke

include the demo_table_jui.css file

max4ever

hellow the and .css_right {float:right} works, but I need the tables th text to stay aligned in some th to the right and not all to the left(due to the div), is there a solution to this ?

Using IE8 in IE7-Compatibility mode

bytebodger

I just ran into this problem and didn't find the answer (directly) anywhere on this site, but the solution was quite simple - albeit a little bit obscured. I didn't realize that I had to also include the following stylesheets:

jquery.dataTables.css
jquery.dataTables_themeroller.css

Once I did this, everything worked fine.