Duplicate header rows appear when using sScrollx option in datetable

Duplicate header rows appear when using sScrollx option in datetable

kshitijakshitija Posts: 3Questions: 0Answers: 0
edited April 2014 in Scroller
I have added following options to datatable
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

There are duplicate header rows formed.The html structure formed includes one header formed with class name = "dataTables_scrollHead" and the other header row is formed inside dataTables_scrollBody > table > head

The jsfiddle link html code is provided : http://jsfiddle.net/Ne44E/

Replies

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin
    This is correct operation for DataTables. The header has to be in the header and body containers in order to allow the column alignment to work. The second header (the one in the body) should be hidden. If it isn't please link to a test case showing the issue.

    Allan
  • kshitijakshitija Posts: 3Questions: 0Answers: 0
    The jsfiddle link for the above test case is : http://jsfiddle.net/pC2Qt/
  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin
    Your fiddle code just shows the output only, not the actual running code. I can't debug that.

    Allan
  • kshitijakshitija Posts: 3Questions: 0Answers: 0
    updated fiddle code for above test case : http://jsfiddle.net/pC2Qt/4/
  • valenpovalenpo Posts: 11Questions: 0Answers: 0

    Alan, hi.

    We have same issue for IE7 with 1.10 version. For some reason IE7 doesn't understand height: 0px; and duplication of headers appears on scroll body. I created some patch for this:

    // Clone the current header and footer elements and then place it into the inner table
    headerCopy = header.clone().prependTo( table );
    headerTrgEls = header.find('tr'); // original header is in its own table
    headerSrcEls = headerCopy.find('tr');
    headerCopy.find('th, td').removeAttr('tabindex').empty();

    you need empty any th, td and it will looks fine for IE7 too.

    Regards,
    Valentin

  • ibklieweribkliewer Posts: 1Questions: 0Answers: 0

    valenpo,
    If you do the empty, it distorts the table content so that the columns do not match with the header. You cannot even set the line-height or font-size which is what you need to do with IE7 or any of the compatibility modes.

    Allan,
    I created a fiddle for you, but, the issue is with IE7 and the compatibility modes. Many of my customers fall into one of these options. JSFiddle does not work at all in anything less than IE9, so a screenshot is the best I could do. When I bring up your example in IE7, it works fine. So, I took your style and used that and the issue was resolved. Kinda a bummer since my style has half the code and I don't have any really good idea what about the style could be the issue.

  • rboughanirboughani Posts: 9Questions: 2Answers: 0

    When i use "sScrollX": "100" it work, but i try to define in % it dosnt work
    What's the problem ?

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    Link to a test case, as per the forums rules please.

    Allan

  • loveMrStarloveMrStar Posts: 1Questions: 0Answers: 0

    I also have this error Error

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    @loveMrStar - As per my last post in this thread, please link to a test case so it can be debugged.

    Allan

  • geamgeam Posts: 2Questions: 0Answers: 0
    edited March 2015

    Hi, I've got the same problème.
    Like in the last provied fiddle (http://jsfiddle.net/pC2Qt/4/) the sort icone appear on the first row of the '.dataTables_scrollBody' .

    In fact, the sorting icone is the one from the thead of the '.dataTables_scrollBody' that overflow and is shown on the first row.

    I've edit the jquery.dataTables.js and correct the issue but I'm not that great in js and I don't know if the way I fix it is good (but at least it's fix).

    To prevent the display of the icone, in the function _fnScrollDraw, juste before the

    /*
     * 4. Clean up
     */
    

    I add this line :

    $(".dataTables_scrollBody th").removeAttr('class');
    

    That way the measurment are good and the icone is not display (but I'm pretty sure there is a better to do it). Hope it could help debug.

    Sorry if my english is bad, I tried my best.

    Geam

    Edit : OS, we can't preview what we type when editing comment

  • AntlionAntlion Posts: 3Questions: 2Answers: 0

    Same issue

    http://www.angrycrows.com/guilds

    The 2nd header is not hidden for whatever reason.

  • geamgeam Posts: 2Questions: 0Answers: 0

    @Antlion

    In a way less trash way that what I've done, you could do something like (if i've well understand, 'DataTables_Table_0' is the name of your table) :

    $('#DataTables_Table_0').on( 'draw.dt' function() {
        $('.dataTables_scrollBody thead tr').addClass('hidden')
    }
    

    And do this in the init of your dataTable :

    $('#DataTables_Table_0').DataTable( {
        [...], // this is the stuff you already do in init
        "initComplete" : function () {
            $('.dataTables_scrollBody thead tr').addClass('hidden');
        }
    });
    

    Guess that should do the tricks for you

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    @Antlion - Your link appears to work okay for me. I don't see the duplicate header you mention. Do I need to use a specific browser?

    Allan

  • mbinettembinette Posts: 2Questions: 0Answers: 0

    I've created a second simple fiddle for this at http://jsfiddle.net/sx18kpw7/

    But, you can't test in fiddle because for the issue to come up, you have to be in IE with Emulation set to 5.

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    IE with Emulation set to 5.

    As in IE5?!

    Who on earth still uses IE5?! :-). Many libraries don't support IE6, 7 or 8 now. I've seen some dropping IE9 support as well. DataTables currently requires IE6+. IE5 is absolutely not supported in any way.

    DataTables 1.11 will drop support for IE6 and 7.

    Allan

  • mbinettembinette Posts: 2Questions: 0Answers: 0

    I agree. What stinks is that any site that requires "Compatibility Mode" will drop all the way down to IE5 Document Mode as the default. You can cause the site to render in IE7 (or IE8,9,10,Edge) mode by adding the X-UA-Compatible header but not all sites are doing that.

    I agree it shouldn't be fixed in DataTables. But for anyone who runs into the double header issue in IE, open Dev Tools, go to the Emulation tab, and see if changing the Document Mode makes a difference. If so, no reason to report it as a bug.

  • BanDonBanDon Posts: 1Questions: 0Answers: 0

    Try this:

    div.dataTables_scrollBody thead th { 
      vertical-align: top;
    }
    
  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    Personally I feel that any site running in compatibility mode probably has bigger issues that a double header appearing ;-).

    Allan

  • uchdadiyasandipuchdadiyasandip Posts: 9Questions: 3Answers: 0

    I have also facing this issue.when I used with bootstrap's css and js file,double header appear if I remove bootstrap's css and js,it works fine.

    why this is happening ?my site is build on bootstrap.

  • uchdadiyasandipuchdadiyasandip Posts: 9Questions: 3Answers: 0

    here is my Datatable Debug bookmarklet results

    http://debug.datatables.net/ozivuj

    I also have problem in column alignment of header and body.

    any idea how can I solve this issue ?

  • allanallan Posts: 49,058Questions: 1Answers: 7,174 Site admin

    @uchdadiyasandip - Can you use the latest version of the Bootstrap / DataTables integration CSS please.

    Allan

This discussion has been closed.