Themeroller -- Sort Icons render on separate line

Themeroller -- Sort Icons render on separate line

edited September 2009 in General Posts: 1
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?

Replies

  • Posts: 22,394
    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
  • Posts: 1
    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 <span>.

    Any ideas on possible workarounds?
  • I had the same problem with IE6 and IE7. I solved it by using:

    <th><div style="float: left;">Column header</div></th>

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

    Regards,
    Martin
  • 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.
  • Posts: 22,394
    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
  • include the demo_table_jui.css file
  • Posts: 45
    hellow the <div style="float:left"></div> 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
  • 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.
This discussion has been closed.