right align?

degenaro

I have code like this:

[code]

var oTable;
$(document).ready(function() {
oTable = $('#jobs-table').dataTable( {
"bProcessing": true,
"bPaginate": false,
"bFilter": true,
"sScrollX": "100%",
"sScrollY": "600px",
"bInfo": false,
"sAjaxSource": "ducc-servlet/json-format-aaData-jobs",
"aaSorting": [],
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ],
"fnRowCallback" : function(nRow,aData,iDisplayIndex) {
$('td:eq(0)', nRow).css( "text-align", "right" );
$('td:eq(1)', nRow).css( "text-align", "right" );
$('td:eq(3)', nRow).css( "text-align", "right" );
$('td:eq(8)', nRow).css( "text-align", "right" );
$('td:eq(9)', nRow).css( "text-align", "right" );
$('td:eq(10)', nRow).css( "text-align", "right" );
$('td:eq(11)', nRow).css( "text-align", "right" );
$('td:eq(12)', nRow).css( "text-align", "right" );
$('td:eq(13)', nRow).css( "text-align", "right" );
$('td:eq(14)', nRow).css( "text-align", "right" );
$('td:eq(15)', nRow).css( "text-align", "right" );
$('td:eq(16)', nRow).css( "text-align", "right" );
$('td:eq(17)', nRow).css( "text-align", "right" );
$('td:eq(18)', nRow).css( "text-align", "right" );
$('td:eq(19)', nRow).css( "text-align", "right" );
$('td:eq(20)', nRow).css( "text-align", "right" );
return nRow;
},
} );
} );

[/code]

Works as expected using FF. But with Chrome, columns 19 and 20 are not right-aligned. Any suggestions as to what I might be doing wrong?

Thanks.

Lou.

allan

Can you link to the page so we can take a look please.

Allan

degenaro

Although the code base is public domain (Apache UIMA-DUCC), I don't have a publicly available deployment. Anything in particular one should look for relative to my issue?

Lou.

allan

All I can really suggest is looking at the document with your browser's developer tools. That's what I would have done if you were able to link to a test case.

Allan

degenaro

I can't seem to paste, so I'll type what I see (hopefully w/o typos!):

[code]
...

...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

...
[/code]

Of the final three lines, shouldn't the first two (e.g. cols 19 and 20) have styles for text aligning on the right?

Lou.

allan

Do you have any inner tables? As I say, really I'm just guessing without a test case though, sorry.

Allan

degenaro

Not sure what you mean by "inner tables". When I expand the last few entries, I see:

[code]
...

0


0


0


some abbreviated text...


...
[/code]

Still haven't figured out how to make this available live - thinking...

Lou.

PS - in my previous comment, due to poor typing on my part, the ending 's should be . Sure wish cut and paste worked!

degenaro

Recall that for the same columns, Chrome is not aligning right while FF is. The "bad" column entries in Chrome look like this:

[code]

[/code]

The "good" column entries in FF look like this:

[code]

[/code]

jsmith88

Shot in the dark here, but try this... Instead of doing:
[code]$('td').css('text-align', 'right')[/code]
Instead try this:
[code]$('td').css('textAlign', 'right')[/code]
When dynamically adding styling with JavaScript, sometimes you need to use camel case to target hyphenated CSS properties.

jsmith88

Another suggestion: why not use a stylesheet for this?

i.e.

[code]#jobs-table td {
text-align: right;
}[/code]

This is actually an optimization, because you won't have to manipulate the DOM for every single row.

Hope one of my suggestions works for you. Good luck!

allan

Agreed - using a class would be good (you need to use a class to target only specific columns).

However, I think that to be able to offer any further help we would need a link to the page you are working on, as we are currently just guessing without the full information that is needed to be able to actually offer real help.

Allan

degenaro

Based on the hint given above about "inner tables", I noticed that in one of my columns I have this:
[code]
...



text



...
[/code]
so that the text and image were side by side in the column.

By replacing the table with:

text



...
[/code]
the text is above and the image is below, but the right alignment problems in the other 2 columns magically disappeared!

So I am content for the moment with this issue.

Thanks for the help!

I do have another problem for which I'll open another discussion, since a quick forum search was not revealing.

Lou.

degenaro

In fact after further trolling of this very helpful forum, I managed to diagnose my other problem too. I needed to add:

[code]
oTable.fnAdjustColumnSizing();
[/code]

upon callback from:

[code]
oTable.fnReloadAjax("/ducc-servlet/json-format-aaData-jobs",ducc_load_scroll_jobs_callback);
[/code]

So the further discussion I proposed above won't be necessary.

Thanks again.

Lou.