Help - Header squished if vertical scrolling is enabled

Help - Header squished if vertical scrolling is enabled

RelaySignalRelaySignal Posts: 1Questions: 0Answers: 0
edited August 2012 in DataTables 1.9
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 () { this.fnAdjustColumnSizing(true); }, "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 () { oTable.fnAdjustColumnSizing(); }); }); </script> <table name="tblportVolMiniPositions" id="tblportVolMiniPositions" class="normal display" style="border-collapse:collapse;width:100%;"> <thead> <tr>...
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: http://i.imgur.com/kbVkS.png

Replies

  • allanallan Posts: 23,180Questions: 0Answers: 611
    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?

    Allan
  • bradykurtzbradykurtz Posts: 1Questions: 0Answers: 0
    edited September 2012
    I am haveing the same issue. No Javascript error. Any Help?
  • allanallan Posts: 23,180Questions: 0Answers: 611
    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.

    Allan
  • neilsneils Posts: 8Questions: 0Answers: 0
    Having the same issue I noticed that this error happens when using the Bootstrap framework. I haven't yet found any workaround however :-(
  • allanallan Posts: 23,180Questions: 0Answers: 611
    Can you link to a page showing the problem please? Also are you using the very latest files: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap ?

    Allan
  • neilsneils Posts: 8Questions: 0Answers: 0
    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:
    http://developer.triplexweb.hu/demo.html
    The header widths get their normal size after scrolling down the datatable.
    Thank you for having a look on the page.
    Neils
This discussion has been closed.