Header width

bruno

Hi guys,

I have been having this problem that I can't fix. First of all, let me explain how my tables works. They are generated in a server side, so on the page load a have to fix the tbody, thead and tfoot, because I'm using datagrid from ASP.NET:

[code]
$(document).ready(function () {
var tbl = document.getElementById('dtgRelatorio');

// cria thead e tbody
var tblHead = document.createElement('thead');
var tblBody = document.createElement('tbody');
var tblFoot = document.createElement('tfoot');

// gaurda a primeira linha da tabela separado do tbody e tfoot
var headerRow = $(tbl).find('tr:first')
var bodyRows = $(tbl).find('tr:not(:first):not(:last)');
var footRow = $(tbl).find('tr:last');

// remove as linhas originais
headerRow.remove();
bodyRows.remove();
footRow.remove();

// remove thead, tbody e tfoot já existentes
$(tbl).find('tbody').remove();
$(tbl).find('thead').remove();
$(tbl).find('tfoot').remove();

// add linhas no head e body
$(tblHead).append(headerRow);
$(tblBody).append(bodyRows);
$(tblFoot).append(footRow);

// add o head e body na tabela
$(tbl).append(tblHead);
$(tbl).append(tblBody);
$(tbl).append(tblFoot);
});
[/code]


After that, I intialize the DataTables:

[code]
$('#dtgRelatorio').dataTable({
"bJQueryUI": true,
"oLanguage":
{
"sProcessing" : "Processando...",
"sLengthMenu" : "Mostrar _MENU_ registros",
"sZeroRecords" : "Não foram encontrados resultados",
"sInfo" : "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty" : "Mostrando de 0 até 0 de 0 registros",
"sInfoFiltered" : "(filtrado de _MAX_ registros no total)",
"sInfoPostFix" : "",
"sSearch" : "Buscar:",
"sUrl" : "",
"oPaginate":
{
"sFirst" : "Primeiro",
"sPrevious" : "Anterior",
"sNext" : "Seguinte",
"sLast" : "Último"
}
},
"sPaginationType": "full_numbers",
'sDom': '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"' +
'<"datatable_ddlLenght"l><"datatable_searchBox"f>' +
'>' +
'' +
'<"fg-button ui-state-default"ip>'
});
[/code]

Finally, my problem is the headers width with a sorter icon. The header's text appear in one line and the sorter icon appear in the next line, how you can see in the red cicles in the image below. I saw on firebug that the dataTables set the width property to the columns, but it is wrong, should be a little more. I'm using the css_rigth to put the sorter icon in the same line of the text.

Error:
http://img811.imageshack.us/img811/6316/problemdx.jpg

Please, help me.

Thank you!

bruno

Someone?

GregP

Too hard to tell with just a screenshot. An icon issue is almost always a CSS issue, though. With live access to the table, we could suggest CSS changes. This is a common problem, though; have a poke around the forum, surely you'll find another thread with the 'icon on one line, text on another' issue.

bombhaus

apply the css white-space: nowrap; to the th - see if that works

bruno

I already did it and dosen't works. I really don't know what should I do, I'm totally lost.

jimmyle2008

you need to add the "display" as the css class of your table assuming you are using alan's demo-jui css.