Header columns are not aligned with the data columns

Header columns are not aligned with the data columns

fbolandfboland Posts: 18Questions: 0Answers: 0
edited December 2013 in DataTables 1.9
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]

Replies

  • fbolandfboland Posts: 18Questions: 0Answers: 0
    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 ?
  • allanallan Posts: 63,494Questions: 1Answers: 10,470 Site admin
    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
  • fbolandfboland Posts: 18Questions: 0Answers: 0
    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 ?
  • quantasquantas Posts: 2Questions: 0Answers: 0
    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]
  • quantasquantas Posts: 2Questions: 0Answers: 0
    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!
This discussion has been closed.