CODEWITHSUNDEEP
javascriptjquerycssdatatables
Fahad
Fahad

Reputation: 403

dataTables header alignment issues

I'm using dataTables for my application and its awesome, but I do have a small problem: fnAdjustColumnSizing function only works when I resize the browser. Lets say I don't resize the browser and any additional scroll bars (i.e body scroll) bar pops up or any additional scroll bar pops up because I have the overflow set as auto for some within my page the header does not align with the columns. I'm including the image so you can see whats going on.

enter image description here

As you see in the image above, the scroll bar on the right causes the alignment issues. I have to re size the window to fix this problem every time its not doing it automatically how it works when I re size the the browser. Any suggestions?

Javascript:

$(document).ready(function() {
var oTable = $('#myTable').dataTable({
    "sScrollY" : "400px",
    "bPaginate" : false,
    "aaSorting": []
});
    $(window).bind('resize', function () {
        oTable.fnAdjustColumnSizing();
    } );
});

CSS:

#summary{
overflow-y: auto;
overflow-x: auto;
}
table.display {
font-family:arial;
background-color: #FFFFFF;
margin:0px 0pt 0px;
text-align: left;
position: relative;
border: 2px #808080;
border-style: outset;

}
table.display thead th {
background-color: #FFFFFF;
border: 1px #808080;
border-style: groove;
font-size: 14px;
font-family: Arial;
font-weight: normal;
text-align: center;
background-position: center bottom;
cursor: hand;
position: relative;

}

table.display tbody {
color: #3d3d3d;
font-size: 12px;
font-weight: normal;
vertical-align: center;
text-align:left;    
font-family: Arial;




}
#export{
cursor: hand;
}
.highlight td {background: #FFFFFF;}
.cbx{
width: 13px;
height: 13px;
}
#table1{
height:600px; 
overflow:auto;
}

Upvotes: 0

Views: 11698

Answers (2)

robsta
robsta

Reputation: 426

Updating this in dataTables.fixedHeader.js from fixed to auto worked for me.

enter image description here

Note: It is probably not a good idea to update the dataTables.fixedHeader.js directly as I have for this example.

Upvotes: 0

Fahad
Fahad

Reputation: 403

After adding "sScrollX" : "100%", to my javascript it works fine for me now!.

Upvotes: 1

Related Questions