right align?
right align?
degenaro
Posts: 24Questions: 1Answers: 0
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.
[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.
This discussion has been closed.
Replies
Allan
Lou.
Allan
[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
[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!
[code]
[/code]
The "good" column entries in FF look like this:
[code]
[/code]
[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.
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!
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
[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.
[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.