Datatable not showing properly in modal box

kaustubh.agrawal2000

Hi
I am trying to show a datatable in a modal box, which opens when user clicks a button.
Although the datatable is loading properly but its overflowing outside the modal box.

What I want to do is,
display data table in modal box properly (I am okay if it hides some of the columns and adds a (+) to expand the view ..
same as responsive mobile/tab view.

You can see the problem here

URL : http://gadhiya.in/dispatch
UNAME: kaustubh.agrawal2012@gmail.com
PWD : 12345678

After login > Click transactions > click Dispatch > Click (New) > click (Select Sauda) button on the editor form

I have checked a few things out as below, but without any success
https://datatables.net/examples/api/tabs_and_scrolling.html
https://datatables.net/forums/discussion/41870/column-width-not-working
https://stackoverflow.com/questions/25215750/datatables-does-not-becomes-responsive-on-bootstrap3-modal-dialog

Please help me with this.
Thanks.

allan

Add width="100%" to your table you are inserting into the document and also you'll probably need to enable scrollX for that table since its content is wider than the visible area.

Finally you should call columns.adjust() when the modal is made visible (or initialise the DataTable once the modal is visible).

Allan

kaustubh.agrawal2000

Hi allan,

I have tried all your suggestions.. but it dosent seem to be working .

you can check my JS in this file
http://gadhiya.in/web/js/dispatch.js

in fact the scrollX itself is not working.

When the screen size is greater than 765px (PC) it does not work, but when I reduce the browser width below 760, the table fits in the modal window properly.

Kindly help me with this.

Regards
Kaustubh

allan

Ah - the problem is that you have a div class="container" element inside your modal, in from the Bootstrap CSS:

@media (min-width: 1200px)
.container {
    width: 1170px;
}

Thus resulting in the width being incorrect. It isn't a DataTables issue I'm afraid, but one in how you are using Bootstrap.

Allan

kaustubh.agrawal2000

Hi Allan

You are awesome!!!

I wasted a lot of time figuring it out.. finally gaveup and asked for help..!!

Thanks a lot !!!
Thanks a lot !!!
Thanks a lot !!!
Thanks a lot !!!

rf1234

ok, Kaustubh and Allan, let me add a couple:
Thanks a lot !!!
Thanks a lot !!!
Thanks a lot !!!

Based on Kaustubh's example I got it done pretty easily.

I have a bootstrap modal with a child data table in it opening on button click of the parent data table. Here is the button definition:

$.fn.dataTable.ext.buttons.contractFiltrs = {
        //only enabled when one row is selected (like edit / delete)
        extend: 'selectedSingle', //alternative would be 'selected' (multiple rows)
        text: contractFiltrsLabel,
        name: "contractFiltrsButton",
        attr:  {
                "data-toggle": "modal",
                "data-target": "#contractFiltrModal"
            },
        action: function ( e, dt, button, config ) {
            setTimeout(function() {
                contractFiltrTable.columns.adjust();
            }, 250)
        } 
    };

The rest was straight forward based on Kaustubh's HTML. Here is mine:

<!--tblContractFiltrs: contract filters in a modal-->
<div class="container">
    <div class="modal fade" id="contractFiltrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="contractFiltrHeader">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" style="text-align:justify"><span class="contractFiltrHeader"><?php echo $en?('Contract Report Filters'):('Berichtsfilter des Vertrags');?></span></h4>
                </div>
            <div class="modal-body">        
                <table id="tblContractFiltr" class="table table-striped table-bordered"
                       cellspacing="0" width="100%">
                    <thead>            
                        <tr>
                            <th><?php echo $en?('Name'):('Name');?></th>
                            <th class="fieldType"><?php echo $en?('Field Type'):('Feldtyp');?></th>
                            <th class="contractFiltrs"><?php echo $en?('Value'):('Wert');?></th>
                        </tr>
                    </thead>                
                </table>     
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $en?('Close'):('Schliessen');?></button>
            </div>    
        </div>
    </div>
</div>

pjustindaryll

The width="100%" and "autoWidth": true solved it! Thanks Allan!

MohamedMagdey

.fade:not(.show) {
opacity: 0;
}
you sholud change opacity in datatables.css file to:
.fade:not(.show) {
opacity: 1;
}

MarKAngel85

HOLA BUENOS DIAS YO TENGO EL PROBLEMA DE QUE NO FUNCIONA MI BUSCADOR DE DATATABLE EN EL CUADRO MODAL

HELP PLEASE

HELLO GOOD MORNING I HAVE THE PROBLEM THAT MY DATATABLE SEARCHER DOES NOT WORK IN THE MODAL BOX

colin

@MarKAngel85 We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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