Formatting help

airandfingers

Hi,
I'm creating multiple DataTables within my page, and I'm seeing some rather interesting formatting/display behavior for some aspects of the tables. For example, this is how one of my tables shows up:
http://tinypic.com/view.php?pic=seq6o1&s=5
Note the two sets of sorting buttons - up/down and left/right.

Most of my tables just look like this:
http://tinypic.com/view.php?pic=2ljj7eg&s=5
A few issues:
1) Can I force the header to fit on a single line? In the above example, note that the sorting button for "Priority" falls on a second line, forcing the header to be two lines in height.
2) I'm using jQuery UI's "Start" theme to style this (I've set the bJqueryUI flag to true), but my table still doesn't look like this: http://www.datatables.net/styling/themes/start My theme's CSS file doesn't seem to apply to my DataTables for some reason. The "information" and "pagination" portions of the controls aren't given ui-widget-header classes like they are in that styling demo - could it have to do with my use of Scroller?
3) The sScrollY setting is really cramping the flexibility of my tables (but it's necessary since I'm using Scroller); I just want them to scale according to the height of their container (I'm using UI.Layout (http://layout.jquery-dev.net/) to divide up my page). What's the best way to do this? Can I change a table's sScrollY value without destroying and reinitializing it?

Muchas gracias,
Aron

airandfingers

Also,
0) How can I get rid of those two sets of scrolling buttons? Is there a known cause for this? I don't see anything related to filter buttons in my settings for that table.

Thanks!

allan

> 0) Note the two sets of sorting buttons - up/down and left/right.

How very odd - I've never seen that before. I would be almost certain that there is a style somewhere which is forcing the width of the icon elements to be wider than they should be, which is resulting in the sprite showing more of itself (as it were) than it should. If you can give me a link to the page I should be able to tell you what is causing that - otherwise, I'd suggest looking at those elements in Firebug and seeing what styles are applied to it.

> 1) Can I force the header to fit on a single line?

You certainly can. A little bit of CSS will do it:

[code]
table.display thead th {
white-space: nowrap;
}

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

table.display thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
[/code]

should do it (you might need to change the selectors a little depending on your HTML).

> 2) I'm using jQuery UI's "Start" theme

Are you including the "media/css/demo_table_jui.css" in your page (from the DataTables package)? I'm going to guess not since the second two CSS blocks above are actually from that file (although your table might not be class "display"...). I think if you include that file that should solve a good number of these issues.

> 3) The sScrollY setting is really cramping the flexibility of my tables

Do you know the height of the container when you initialise the table? If so you can read the height and set sScrollY with that. If not then you can change the height of the scrolling element with: $('div.dataTables_scrollBody').height(200) (again you might need to change the selector - almost certainly in fact to limit the scope). You might need to call Scroller's "fnMeasure" method to recalculate the number of rows to be shown when you do this (this is new is 1.0.1.dev btw).

Regards,
Allan