TH layout problem

ruzz

Hi all,

I have an annoying (and hopefully trivial) problem with the header cells in my DataTable. I'm using IE7 and FF3.6, jquery-ui-1.8.4 and DataTables 1.7.0. - both browsers behave the same (for this problem, anyway)

If I look at examples/basic_init/themes.html I see pretty much exactly what I want to achieve. Viewing the source for that page it looks (certainly in terms of HTML/CSS) the same as my table. However, my table renders the ui-icon arrows (triangles) at the the top left of the header button and the header text centered but at the bottom of the button - the official example places the icon on the same level as the header text but to the right <-- this is what I want to see!

If I check and compare the html/css for both pages in firebug, they look the same.

Can anyone suggest a solution please?

ruzz

allan

Have you got a float:right on the icons? That's how I achieve the effect in the examples.

Allan

ruzz

My first thought was "Allan must be floating right" - but I must be going blind - where are you doing that?

Thanks

allan

.css_right {
float: right;
}

In the demo_page.css file.

Allan

ruzz

Hi Allan

Ok - in jQuery.datatables.js I've found this:

[code] "sSortJUIAsc": "css_right ui-icon ui-icon-triangle-1-n", [/code]

which in Firebug looks like this:
[code][/code]

Here's how mine looks:

[code][/code]

and for completenest, here's my entire TH:
[code]
Report Name
[/code]
and yours:
[code]
Rendering engine
[/code]

Note - the width isn't the problem, just so happens that I've hidden a bunch of columns and that's where I've ended up. Problem is the same regardless of width
Note also, the only style info in effect is jQueryUI and DataTables - all my css files have been removed and problem persists.

TIA
ruzz

allan

Do you have .css_right { float:right; } in your CSS somewhere? Can you post a link so we can see the problem?

Allan

ruzz

Hi Allan

Thanks. Your last was indeed the fix (but I'm guessing you knew that ;)

But this begs the question, is that the correct place for what is essentially a layout style for an intrinsic component part of datatables? I realise it's generic enough sounding (css_right) to be defined in a more global container (ie demo_page.css) but you are packaging a plugin - shouldn't everything your component and examples need be inside (in this case) demo_table_jui.css/demo_table.css?

I wouldn't expect to find anything in demo_page other than manipulation of the table as a whole...

Just my 0.02.

ruzz

allan

Yup I think you are right - it's probably not the best place for it. I've always sort of viewed my CSS for DataTables as 'demo' CSS that will be customised - but of course that isn't always the case. I should really spend some time tiding this and a few other things up. Added to the to-do list :-)

Allan

ruzz

Excellent.

Excellent plugin. Excellent author. Excellent and magnanimous support, too. Rare.

:)

ruzz

allan

Thank you :-)

Allan

ruzz

Hi Allan,

In the interests of conformity, when you come to that item in your todo list, can I suggest:

demo_table.css --> datatables.css
demo_table_jui.css --> datatables_jui.css

It would save time (and reduce errors) when publishing production code/systems - and when upgrading to your latest. I don't like the term "demo" left hanging around for obvious reasons ;)

TIA
ruzz

allan

Sounds like quite a good approach to take that kind of layout. I've bookmarked this page to remind me to do this. Not sure if I'll include it in the 1.7 series yet, or the next major revision - depends how that lines up...

Allan