Themeroller -- Sort Icons render on separate line

Themeroller -- Sort Icons render on separate line

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


  • allanallan Posts: 45,717Questions: 1Answers: 6,279 Site admin
    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.

  • mbinimbini Posts: 1Questions: 0Answers: 0
    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 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?
  • mkarlssonmkarlsson Posts: 1Questions: 0Answers: 0
    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.

  • gotrootgotroot Posts: 1Questions: 0Answers: 0
    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.
  • allanallan Posts: 45,717Questions: 1Answers: 6,279 Site admin
    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)?

  • l0c0lukel0c0luke Posts: 1Questions: 0Answers: 0
    include the demo_table_jui.css file
  • max4evermax4ever Posts: 45Questions: 0Answers: 0
    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
  • bytebodgerbytebodger Posts: 1Questions: 0Answers: 0
    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:


    Once I did this, everything worked fine.
This discussion has been closed.