jQuery UI not being applied to header/footer

dmolavi

See http://www.gallerymodules.com/ ... the "Show.." and "Filter" in the header, as well as the count and pagination in the footer are not styled as shown in the demos here: http://datatables.net/examples/basic_init/themes.html

I am using a Themeroller theme. Any suggestions on getting those two elements properly displayed would be greatly appreciated.

GregP

It's hard to say why because I can only view rendered source, but somehow it's not applying the DIV element that wraps those two tools. For example, the rendered output of my table looks like:

[code]


Show ...

Search:


etc...
[/code]

If I inspect your DOM, I'm not seeing the DIV classed with "ui-toolbar", "ui-widget-header" and the other jQuery UI classes that style the header properly. I couldn't really guess why it's missing, but it's certainly missing. Sorry that's not a solution, but at least I can help identify the symptom. ;-)

dmolavi

Yeah, i checked the rendered source against the examples here and noticed that right away. i don't see anything else in my other css that would cause the conflicts, and it appears that my initialization code is good. are some initialization options mutually exclusive w.r.t. jquery UI usage?

GregP

Aha!

If I'm not mistaken, it's your sDom parameter. You need to write the sDom parameter differently for jQuery UI than for standard HTML+CSS.

For example, here's mine:

"sDom": '<"H"lfr>t<"F"i>',

The "H" and "F" indicate to insert the additional jQuery UI headers and footers.

dmolavi

BINGO! Thanks :)

GregP

Awesome, glad my scant knowledge was able to help someone. ;-) The updated version looks great! Love the tooltip implementation, too. Will probably use that particular tooltip implemenation myself, with different colours.

dmolavi

Those are the FlowPlayer tooltips: http://flowplayer.org/tools/tooltip/index.html

I'm going to tweak colors eventually, but want to nail the functionality. The last thing that I want to get working I asked here: http://datatables.net/forums/comments.php?DiscussionID=4000&page=1#Item_1 , but I'm guessing it can't be done as nobody has responded.