Header columns are not aligned with the data columns

fboland

Hi,

All is on the title, i search on the forum and find a lot of discussion about this problem but without a solution for me.

You can show a screenshot here : http://lerelaisimmobilier.com/Screenshot.png

And the datatable code :
[code]
$.ajax(
{
type: 'GET',
dataType: 'json',
url: "ajax/DataTable.php",
data: {'dataTableName':Self_dataTable.dataTableName, 'required':'ColumnsDef'},
success: function(dataCols)
{
// Mise à jour de la variable des champs
fields = dataCols.aoColumns;

// Création du datatable
Self_dataTable.dataTable = $table.dataTable(
{
"sDom": "RrtS",
"sScrollX": "100%",
"sScrollY": "500px",
"bServerSide": true,
"bProcessing": true,
"aoColumns": fields,
"bDeferRender": true,
"sAjaxSource": "ajax/DataTable.php",
"fnServerData": function (sSource, aoData, fnCallback, oSettings)
{
// Ajout de paramètre supplémentaire

// Type de demande "données"
aoData.push({'name':'required', 'value':'Data'});

// Nom du dataTable
if(!$.isNue(Self_dataTable.dataTableName)) aoData.push({'name':'dataTableName', 'value':Self_dataTable.dataTableName});

// Paramètre ajax
if(!$.isNue(Self_dataTable.paramAjax)) aoData.push({'name':'paramAjax', 'value':Self_dataTable.paramAjax});

// Exécution de la requête ajax
oSettings.jqXHR = $.ajax(
{
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(data)
{
// Exécution de la fonction par défaut
fnCallback.call(null, data);
}
});
}
});
}
});
[/code]

"fields" var json lool like this :
[code]
{
"aoColumns":[
{
"sTitle":"aze",
"mData":"toto",
"sDbOrder":"toto",
"sDbSearch":"toto",
"sType":"string",
"sWidth":"200px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"tata",
"sDbOrder":"tata",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
{
"sTitle":"aze",
"mData":"titi",
"sDbOrder":"",
"sDbSearch":"",
"sType":"string",
"sWidth":"90px",
"sClass":"align-center",
"bSortable":true,
"bSearchable":true
},
.....
]
}
[/code]

fboland

It seems the problem is the y axes scroll bar width.

I try set manualy : .dataTables_scrollBody { overflow-x: auto; overflow-y: hidden; }
instead of .dataTables_scrollBody { overflow: auto; }
and the problem disepear.

But i need an y axes scroll bar.

How can i do ?

allan

Can you please link to a test page showing the issue so we can see the problem and debug it.

If you have `border-collapse: collapse` in your CSS for the table, change it to be `border-collapse: separate` as collapse will not work.

Allan

fboland

Ok, i was trying to test it on a test page without project css and i remember that i have custom the css scrollbar like that :
[code]
::-webkit-scrollbar { margin-left: 3px; width: 8px; height: 8px;} /*-- barre globale --*/
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); border-radius: 0; background-color: rgba(255, 255, 255, 1)} /*-- arriere plan scroll --*/
::-webkit-scrollbar-thumb {border-radius: 10px; background-color: rgba(0,0,0,0.3); -webkit-box-shadow: none;} /*-- barre de scroll --*/
scrollbar { -moz-appearance: none !important;} /*-- clear useragent default style --*/
scrollbarbutton { -moz-appearance: none !important;} /*-- buttons at two ends --*/
thumb {-moz-appearance: none !important;}/*-- the sliding part --*/
scrollcorner {-moz-appearance: none !important; resize:both;}
scrollbar[orient="vertical"] {color:silver;} /*-- vertical or horizontal --*/
[/code]

I remove this part and all works fine.

Do you have an idee how i can keep my custom scrollbar without bug on alignement ?

quantas

I am having the same issue as fboland. The headers start all squished to the left until I click one of them, then they correct themselves. I have even tried forcefully putting the [code]border-collapse:separate[/code] on the table itself and it still starts off this way. Any ideas on how to fix?

[code]


...

var example = $('#example').dataTable({
"sScrollY": "200px",
"bJQueryUI": true,
"bPaginate": false,
"bScrollCollapse": true,
"aaSorting": [[0, "asc"]]
});
[/code]

quantas

Sorry for the double post, but on further review, this is occuring because I am rendering the table inside a DIV that is hidden, I have changed the order of my JS and everything is A-O-K! Excellent software you have written here Allan!