DataTables logo DataTables

Help - Header squished if vertical scrolling is enabled
  • I've tried everything I could think of - upgrading to 1.9.2 (Using 1.9.0 right now), changing options - I just can't seem to fix the headers squishing down when the page is loaded, if vertical scrolling is enabled. Without it, it loads fine. Sorting the table after the page loads also works fine. Here's my code:

    <script type="text/javascript">
        $(document).ready(function () {
            oTable = $('#tblportVolMiniPositions').dataTable({
                "bProcessing": true,
                "fnStateLoadCallback": function (oSettings, oData) {
                    oData.sFilter = "";
                    return true;
                "bScrollAutoCss": true,
                "sScrollY": "450px",
                "bPaginate": false,
                "bAutoWidth": true,
                "bJQueryUI": true,
                "aaSorting": [[1, "asc"]],
                "fnInitComplete": function () {
                "oLanguage": {
                    "sSearch": "Filter Records:",
                    "sLengthMenu": "Display _MENU_ records per page",
                    "sZeroRecords": "No Records found.",
                    "sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
                    "sInfoEmpty": "",
                    "sInfoFiltered": "(filtered from _MAX_ total records)"
                "sDom": 'R<fr>t<"F"ip>l',
                "oColVis": {
                    "aiExclude": [0, 1, 2, 3]
                "aoColumnDefs": [
    			{ "bSortable": false, "aTargets": ["nosort"] },
    			{ "bVisible": false, "aTargets": ["hiddenCol"] },
    			{ "bSearchable": false, "aTargets": ["nosearch"] },
    			{ "sType": "html", "aTargets": ["htmlData"] },
    			{ "sType": "date", "aTargets": ["dateData"] },
    			{ "sType": "string", "aTargets": ["textData"] },
    			{ "sType": "numeric", "aTargets": ["numberData"] },
    			{ "sWidth": "25px", "aTargets": ["smallCell"] }
            $(window).bind('resize', function () {
    <table name="tblportVolMiniPositions" id="tblportVolMiniPositions" class="normal display" style="border-collapse:collapse;width:100%;">

    The page is loaded dynamically via AJAX, so it probably has something to do with how it's initially loaded. Here's an image of what it looks like when the page first loads:
  • Looking at your screenshot I would say it is odds on that there is a Javascript error on the page. What does your browser's console say? Can you give us a link to let us debug further please?

  • I am haveing the same issue. No Javascript error. Any Help?
  • As I suggested in my previous post, we need a lot more information to even have a chance of being able to help with this one! Please link me to a test page showing the problem.

  • Having the same issue I noticed that this error happens when using the Bootstrap framework. I haven't yet found any workaround however :-(
  • Can you link to a page showing the problem please? Also are you using the very latest files: ?

  • Also are you using the very latest files
    I guess I am... :-)
    Can you link to a page showing the problem please?
    You can see it here, clicking on the second accordion header in the right-side content panel:
    The header widths get their normal size after scrolling down the datatable.
    Thank you for having a look on the page.
This discussion has been closed.
All Discussions