right align?

right align?

degenarodegenaro Posts: 24Questions: 1Answers: 0
edited November 2013 in DataTables 1.9
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.

Replies

  • allanallan Posts: 63,494Questions: 1Answers: 10,470 Site admin
    Can you link to the page so we can take a look please.

    Allan
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    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.
  • allanallan Posts: 63,494Questions: 1Answers: 10,470 Site admin
    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
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    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.
  • allanallan Posts: 63,494Questions: 1Answers: 10,470 Site admin
    Do you have any inner tables? As I say, really I'm just guessing without a test case though, sorry.

    Allan
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    edited December 2013
    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!
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    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]
  • jsmith88jsmith88 Posts: 10Questions: 0Answers: 0
    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.
  • jsmith88jsmith88 Posts: 10Questions: 0Answers: 0
    edited December 2013
    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!
  • allanallan Posts: 63,494Questions: 1Answers: 10,470 Site admin
    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
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    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.
  • degenarodegenaro Posts: 24Questions: 1Answers: 0
    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.
This discussion has been closed.