Using jqueryui themes, sort icon + row header on separate lines

Using jqueryui themes, sort icon + row header on separate lines

ssteinerXssteinerX Posts: 15Questions: 0Answers: 0
edited April 2010 in Bug reports
I'm working on using DataTables with the jQuery UI themes.

With no other style sheets in the document, the little sort arrow comes out on a separate line from the header of the column.

Also, the Show XXX entries and Search input do the same thing; appear on separate lines.

I'm using jQuery 1.4, jQueryUI 1.8, and the out of the box south-street theme though the theme doesn't seem to matter.

Does anyone successfully use DataTables with the jQueryUI themes?

Theme support is the 'killer feature' of DataTables, for me and without it, I'm going to have to look for other options. That would be a shame, it seems otherwise so well thought out...




  • stschererstscherer Posts: 2Questions: 0Answers: 0
    Yep I'm seeing the exact same thing; kinda annoying ;-) I'm currently using the Redmond theme. I've tried to strip away everything that could possibly be causing this, but I've run out of ideas:


    $(document).ready(function() {
    oTable = $('#users-table').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
    } );


    Login Name
    Full Name

  • allanallan Posts: 58,921Questions: 1Answers: 9,490 Site admin
    Have you set the icon element to 'float:right'? If you have a look at my demo: you'll see that the style ".css_right { float: right }" is applied. The icon elements have the css_right class applied to them automatically by DataTables (although can be modified if you want).

  • stschererstscherer Posts: 2Questions: 0Answers: 0
    Hi Allan,
    That did the trick! Thanks for a great product.
  • jinxdonejinxdone Posts: 1Questions: 0Answers: 0
    edited February 2011
    nevermind. please delete this post.
  • hugehughhugehugh Posts: 1Questions: 0Answers: 0
    For anybody else who wants a straight answer, just add this style to your style tag in your header:
    [code].css_right {float:right}[/code]
    Why I have to add that myself, I have no idea.
  • bidonbidon Posts: 28Questions: 0Answers: 0
    I have this same problem, and doing float right just makes the 2nd line the right? Any real resolution on this?
  • allanallan Posts: 58,921Questions: 1Answers: 9,490 Site admin
    Are you using the jquery.dataTables_themeroller.css style sheet from the DataTables distribution? It has this in it:

    table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 20px;
    padding-right: 20px;

    table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;

  • JohnEzlabJohnEzlab Posts: 17Questions: 4Answers: 0
    edited September 2012
    UPDATE: My problem was just a newbie mistake so I don't mind if the mods would like to delete my post. My issue was that I had bJQueryUI: true in my dataTable declaration.

    I am using Rails with jQuery UI (I believe this is default with Rails 3.1??). I have now also incorporated twitter bootstrap.

    I have followed the guide for implementing dataTables with bootstrap but I am not getting the correct result and was hoping you could help.

    If I go into firebug and add float right then the sorting arrows display correctly, so I fear the css is not being applied.

    Also, the sorting arrows are all grey and not blue like your example and I think these are coming from jQuery UI. An example URL for the sort icon is:

    Even though I have:
    table.dataTable thead .sorting { background: image-url('dataTables/sort_both.png') no-repeat center right; }
    table.dataTable thead .sorting_asc { background: image-url('dataTables/sort_asc.png') no-repeat center right; }
    table.dataTable thead .sorting_desc { background: image-url('dataTables/sort_desc.png') no-repeat center right; }

    Any help would be greatly appreciated.
  • KailashKailash Posts: 1Questions: 0Answers: 0
    Thanks a lot hugehugh !!

    Finally your trick worked for me!!

    "Error Was:"The Datatables sort icon, on column headers, by default appears under the column header text" ".

    Kailash Nirmal
This discussion has been closed.