I love the jqueryui theme option, just 1 suggestion!

gavin

http://www.datatables.net/examples/basic_init/themes.html
I've been using the JqueryUI theme option on my Datatables, and my clients love it!

They just have 1 little suggestion... the column headers are 2 lines instead of one. In the example above `Rendering Engine` and the sort arrows ^v are on separate lines, and look a bit strange.

How difficult is it to force them onto the same line?

amaechler

Hi gavin

The problem appears to be to small columns. You can use the 'sWidth' option on the columns to manually set their width which should solve the problem (check http://datatables.net/usage/columns).

Cheers,
Andy

JustLikeIcarus

Actually It looks like this could be caused by the position of the span element that has the icon image. It's being floated right via the .css_right class however it's on the right side of the header's text. In this usage of float the span works best on the opposite side of the other content in its parent element. Just to verify, I left padding and everything else as it was and moved the span element to the left of the text and it floated to the right without changing the height of the cell. I believe this is behavior of floated elements within block level elements.

Alan, whats your take on this?

JustLikeIcarus

I did a quick check of floats and found the below quote.

"A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box."

This applies to other line level elements following the floated element. So if the text comes before the floated element then the normal flow will force the float down onto the next line. Moving it to the right causes the float to get ignored by the rest of the line and not move down

allan

Hi guys,

There is a small change coming for this in 1.5.3 (next few days) which will put the icon element as the first child of the TH, which should fix this issue directly.

Are you seeing this on this page: http://www.datatables.net/examples/basic_init/themes.html ? Because it looks fine for me on the various browsers I've used. But either way, if you can hang on just until I finalise my other changes, the problem will hopefully go away!

Regards,
Allan

gavin

Here is a screenshot in my browser (Ubuntu Firefox 3.0.14)

http://lh3.ggpht.com/_ovoDcbMIoYs/Sr7kibeH9oI/AAAAAAAAAPQ/PE9JrmVaruU/s640/datatables-icon-problem-using-jui.png



You can see how the sort icon is not on the same line at the column text.

allan

Hi gavin,

Thanks for the screenshot! It's most odd that I can't reproduce it in Firefox, but I guess it must be either a difference between 3.0 and 3.5, or the fact that the font you are using is a little wider. You might be interested in this thread where TomC suggests a solution (which will be in 1.5.3): http://datatables.net/forums/comments.php?DiscussionID=580

Regards,
Allan

gavin

I look forward to 1.5.3!

An additional request, please:

I noticed that the zebra-striping colors do not change with different jQuery-UI themes.

Here is a screenshot of the Datatables-JUI example, with a new JUI theme:
http://lh6.ggpht.com/_ovoDcbMIoYs/SsZg3rKJQlI/AAAAAAAAAQs/Wf7JbEYYjTU/s1024/datatables-different-jui-theme-but-same-zebra-striping.png

What would be the proper way to use the JUI colors for zebra-striping?

thanks!

allan

Hi gavin,

Regarding the zebra striping - the reason those colours don't change with the theme, is that I couldn't find an appropriate class in the jQuery UI themes base stylesheets. I rather suspect that the classes needed for the odd/even rows would be what they called widget specific (there are a number of examples of them for the date picker etc).

As such (and unless I'm missing something available in the themes), I think the easiest way of styling the zebra rows is just to use the .odd and .even classes.

Regards,
Allan