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

ssteinerX

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...


Thanks,

S

stscherer

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:

[code]







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

[/code]
[code]



Login Name
Full Name
Enabled?
Description



etc...
[/code]

allan

Have you set the icon element to 'float:right'? If you have a look at my demo: http://datatables.net/styling/themes 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).

Regards,
Allan

stscherer

Hi Allan,
That did the trick! Thanks for a great product.
Cheers,
-Steve

jinxdone

nevermind. please delete this post.

hugehugh

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.

bidon

I have this same problem, and doing float right just makes the 2nd line ....to the right? Any real resolution on this?

allan

Are you using the jquery.dataTables_themeroller.css style sheet from the DataTables distribution? It has this in it:

[code]
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;
}
[/code]

Allan

JohnEzlab

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.


ORIGINAL POST:
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:
"url("/assets/jquery-ui/ui-icons_888888_256x240.png")"

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.

Kailash

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" ".

Regards
Kailash Nirmal