header not align or scroll in bootstrap modal

header not align or scroll in bootstrap modal

t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0
edited April 2017 in Free community support

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?

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0

    yes i have....

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited April 2017

    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

  • t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0

    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)

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0
    edited April 2017

    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();
        });
    

    `

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited April 2017

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • t0n1zzt0n1zz Posts: 32Questions: 19Answers: 0

    hmm so how to do that column adjust in modal?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

This discussion has been closed.