Datatable not showing properly in modal box

Datatable not showing properly in modal box

kaustubh.agrawal2000kaustubh.agrawal2000 Posts: 81Questions: 35Answers: 2

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 51,750Questions: 1Answers: 7,832 Site admin

    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.agrawal2000kaustubh.agrawal2000 Posts: 81Questions: 35Answers: 2

    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

  • allanallan Posts: 51,750Questions: 1Answers: 7,832 Site admin
    Answer ✓

    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.agrawal2000kaustubh.agrawal2000 Posts: 81Questions: 35Answers: 2

    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 !!!

  • rf1234rf1234 Posts: 1,444Questions: 50Answers: 195

    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>
    
  • pjustindaryllpjustindaryll Posts: 8Questions: 2Answers: 0

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

  • MohamedMagdeyMohamedMagdey Posts: 2Questions: 0Answers: 0

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

Sign In or Register to comment.