header not align or scroll in bootstrap modal

t0n1zz

hi, so i have datatables inside bootstrap modal, and i am using scrollx and scrolly, but the header in the table is not aligned and also not scrolling like the table body.

how to fix that? i tried to add snippet in https://datatables.net/examples/api/tabs_and_scrolling.html

but it is not working (obiviously because that is for bootstrap tabs). so how to fix it?

kthorngren

Do you have width="100%" applied to your table in HTML?

Kevin

t0n1zz

yes i have....

kthorngren

Many times that's the issue. Can you post a link showing the problem for troubleshooting?

Kevin

t0n1zz

hmm it just a default datatable initialization with scrollx and select extension enabled... in bootstrap modals....

kthorngren

Your Datatables config might be simple / default but the rest of your code is custom to your environment and that is what we need to see.

I found a Bootstrap Modal example and incorporated Datatables into it. With scrollX and select the headers look fine.

You can see it here:
http://live.datatables.net/judogama/1/edit

In order to help you we need more info from you.

Kevin

t0n1zz

well i just don't have any idea how to give you the link since i tried it in local environment..

maybe if this information can help:
1. i am using adminlte bootstrap template which quite popular and support datatable
2. i am using select extension from datatables
3. i am now using responsive extension from datatables too, since after trying a few way i decided to use responsive to solve this header missaligned issue, but it is still exist

this is exact same problem like when i using datatable in bootstrap tabs, whats different is there is a workaround in this site for handling bootstrap tabs, but nobody mention anything about bootstrap modals, most of solution is just add widht = 100% (which is already added since first time i using this datatable)

kthorngren

Any chance you can build a test case like the one I built? You can modify what I have if you like.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Telling us what you have doesn't provide enough details to help. Showing us what you have does. A problem that can be seen in action is very helpful. At a minimum post the relevant (CSS and JS includes, HTML for the table and modals and JS) code here.

Kevin

t0n1zz

okay after i testing it, i find that the header not aligned if i enabled scrollY: '50vh', and i need this feature, so what should i do.... or maybe here i will add my entire table javascript

`
var areapanitia = $('#areapanitia');

var tabletambahpanitia = $('#datatabletambahpanitia').DataTable({
    dom: 'ti',
    select: {
        style:    'os',
        selector: 'td:not(:last-child)'
    },
    scrollY: '50vh',
    autoWidth: true,
    scrollCollapse : true,
    responsive:{
        details:{
            type: 'column',
            target: -1
        }
    },
    columnDefs: [ {
        className: 'control',
        orderable: false,
        targets:   -1
    }],
    paging : false,
    stateSave : false ,
    language: {
        buttons : {},
        select:{
            rows:{
                _: "",
                0: "",
                1: ""
            }
        },
        "sProcessing":   "Sedang proses...",
        "sLengthMenu":   "Tampilan _MENU_ entri",
        "sZeroRecords":  "Tidak ditemukan data yang sesuai",
        "sInfo":         "Tampilan _START_ sampai _END_ dari _TOTAL_ entri",
        "sInfoEmpty":    "Tampilan 0 hingga 0 dari 0 entri",
        "sInfoFiltered": "(disaring dari _MAX_ entri keseluruhan)",
        "sInfoPostFix":  "",
    }
});

$('#searchpanitia').keyup(function(){
    tabletambahpanitia.search($(this).val()).draw() ;
});

tabletambahpanitia
    .on( 'select', function ( e, dt, type, indexes ) {
        var id = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                    return item[0];
                });
        var foto = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                    return item[1];
                });
        var name = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                    return item[3];
                });
        var tempat = $.map(tabletambahpanitia.rows({ selected: true }).data(),function(item){
                    return item[6];
                });
        var htmlpanitia = '<div class="col-sm-12" id="widgetpeserta">';
            htmlpanitia += '<div class="box box-widget widget-user-2"">';
                htmlpanitia += '<div class="widget-user-header bg-aqua">' ;
                    htmlpanitia += '<div class="widget-user-image">';
                        htmlpanitia += '<img class="img-thumbnail" src="'+foto+'" alt="User Image">';
                    htmlpanitia += '</div>';
                    htmlpanitia += '<input type="text" name="panitia" style="display:none;" value="'+id+'"/>'
                    htmlpanitia += '<h3 class="widget-user-username">'+name+'</h3>';
                    htmlpanitia += '<h5 class="widget-user-desc">'+tempat+'</h5>';  
                htmlpanitia += '</div>';            
            htmlpanitia += '</div>';                
            htmlpanitia += '</div>';

        areapanitia.prepend(htmlpanitia);
        $('#tugaspanitia').show();
    } )
    .on('deselect',function(e, dt, type, indexes){
        $('#widgetpeserta').remove();
        $('#tugaspanitia').hide();
    });

`

kthorngren

Found this recent thread regarding scrollY and header alignment issues with hidden tables:
https://datatables.net/forums/discussion/41587

Sounds like you may want to use columns.adjust() to align the columns when the modal opens.

Kevin

allan

Completely agree. If the table is initialised hidden you need to use the method Kevin suggested to make everything align.

Allan

t0n1zz

hmm so how to do that column adjust in modal?

kthorngren

how to do that column adjust in modal?

My suggestion is to listen for the event that opens the modal then use the columns.adjust in that event listener. You may need to use a setTimeout delay like the last example in the discussion I mentioned so the modal has time to display before the columns.adjust executes.

Kevin