Column Widths not playing ball in Modal - unless resize window

ShaneBrennan

Hi Everyone.

I have a modal with a datatable, which I'm using to update bulk analysis information. The Modal and Table are shown below:

   <div class="modal fade" id="ASBresultsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Asbestos Results</h2>
            </div>        
            <div class="modal-body">   
               <div class="Table_Container" >
                  <h2>Enter ASB Results</h2> 
                  <br>  
                  <table id="example" class="display" cellspacing="0" style="width:100%">
                     <thead>
                        <tr>
                           <th>Room Location</th>
                           <th >Area, Item, Material</th>
                           <th >Sample No</th>
                           <th>Identification</th>
                           <th>Rec. Actions</th>
                           <th>MAS</th>
                           <th>PAS</th>
                           <th>Total</th>
                           
                        </tr>
                     </thead>
                  </table>
               </div>
            </div><!--End Modal-Body-->
            <div class="modal-footer">
            Hello
            </div>
         </div> <!-- ENd Model Content -->                     
      </div><!--End Modal-Dialogue-->
   </div> <!-- End of modal fade bs-modal-sm -->

I've setup the data, class and width parts using the following - which works apart from with Width:

         var table = $('#example').DataTable( {
            dom: "Bfrtip",
            ajax: "../server_side/scripts/ET_ASBresultsForBuilding.php?buildingID=27291",
            iDisplayLength: 25,
            columns: [
               { data: "tblASBassets.roomLocation", className: 'editable', width:"20%"},
               { data: null, render: function ( data, type, row ) {
                      return data.tblASBassets.area + ', ' +data.tblASBassets.item + ', ' + data.tblASBassets.material;
                  } },
               { data: null, render: function ( data, type, row ) {
                      // Combine the first and last names into a single table field
                      return data.tblASBassets.approach + ' ' +data.tblASBassets.sampleNo;
                  } },
               { data: "tblASBassets.asbestosFound", className: 'editable', width:"20%" } ,
               { data: "tblASBassets.recommendedAction", className: 'editable', width:"20%" },
               { data: "tblASBassets.MAscore", width:"5%" },
               { data: "tblASBassets.PAscore", width:"5%" },
               { data: "tblASBassets.totalScore", width:"5%" } 

            ],          
            order: [ 1, 'asc' ],
            keys: {
               columns: ':not(:first-child)',
               keys: [ 9 ]
            },
            select: {
               style:    'os',
               selector: 'td:first-child'
            },
            buttons: [

            ]
         } );

I have a button on the screen to display the modal - which runs the following function to display it and try and redraw:

      function  showASBresultsModal() {
         $('#ASBresultsModal').modal('toggle') ;  
         var table = $('#example').DataTable();
         $('#container').css( 'display', 'block' );
         table.columns.adjust().draw();           
      }

When the modal opens the screen looks like:

when I resize the window the table sorts itself out:

I assume this is because it's on a modal... but not 100% sure.... has anyone got any ideas on what I can try to cure this?

Thanks in advance for any help given

ShaneBrennan

ARGH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I knew this would be friggin easy to fix... once I found the answer:

     $('#ASBresultsModal').on('shown.bs.modal', function () {
        var table = $('#example').DataTable();
        table.columns.adjust();
     });