The use of responsive.recalc() on bootstrap modal

teojicd

I currently have such a markup on my page: a html table inside a bootstrap modal.

<div class="modal fade" id="searchModal" role="dialog">
    <!-- <div id="divLoading" class="loading" style="display:none;">Loading&#8230;</div> -->
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="qry-screen-h4" class="modal-title">Search for Inventory</h4>
            </div>
            <div class="modal-body">
                <table id="searchProdTable" style="width:100%" class="display"></table>


            </div>

        </div>

    </div>
</div>

My javascript code to initialise datatable looks like this:

     $('#' + tableElementId).DataTable({
                "dom": '<"toolbar">frtip',
                "order": [[idIndex, "desc"]],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": currentUrl + "/" + controllerName + "/" + functionName,
                    "type": "POST",
                    "data": {
                        "d": $("#search-sel").is(':checked')
                    },
                    "error": function (xhr, status, error) {
                        console.log(xhr.responseText);
                        console.log(error);
                    }
                },
                "initComplete": function (settings, json) {
                   
                },

                "columnDefs": result,
                colReorder: true,
                responsive: true
            });

I use recalc like this: when the modal is being shown, I call the function responsive.recalc()

$('#searchModal').on('shown.bs.modal', function (e) {

    $("#searchProdTable").DataTable()
        .columns.adjust()
        .responsive.recalc();
  
})

I have two similar pages with such markup and js code written. On one page, everything is perfect, meaning, when the modal opens, the datatable is already in responsive mode and table itself does not exceed the width of the boostrap modal.

However, one another page, when the modal opens, I can see the datatable exceed the width of the modal for like 1 second, then it automatically becomes responsive and fits within the width of the bootstrap modal.

Need some advice on my situation. Thank you

colin

Hi @teojicd ,

If it's working on one of your tables, but not on the other, it's going to be caused by something either in the table initialisation, or data itself - without seeing that, it's impossible to diagnose.

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

developeruk

Thanks for this snippet!

    $('#searchModal').on('shown.bs.modal', function (e) {

        $("#searchProdTable").DataTable()
            .columns.adjust()
            .responsive.recalc();

    })

My table was overflowing my modal and this fixed it