Bootstrap Tabs and Datatables - making all tabs same size

ShaneBrennan

Hi Everyone

Hopefully someone can help, this is mostly a bootstrap 3 question - but uses datatables.. I've got a tab working with 3 tabs... each tab has a datatable on it. I've got everything working - but the interface keeps scrolling as I click the tabs as each tab is of a different size. Is there a way of telling the tabs to all resize to the largest pane?

Thank you in advance for any help.

I've found some code to do this to tabs where no datatable is used, i.e. just label, text, selection, textareas, etc are used. I can post if anyone who works with bootstrap wants a copy.

rduncecb

Using bootstrap 3, do you have your entire tab html inside div like this?

<div id="tabContainer" class="container-fluid">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#tabs-a">TAB A</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" id="tabs-a" class="tab-pane fade in">
            <table id="tab-a-table" width="100%">
            </table>
        </div>
    </div>
</div>

container-fluid makes it fill the enclosing container, the width attribute on the table makes it fill the tab. It works for me to make my the tabs take up full width and for the table to take up the full width of the tab.

allan

This example shows what you are looking for.

Allan

ShaneBrennan

Hi Rduncecb

I've added the "container-fluid" to the div.. but still not working:

 <div id="bs-example" class="container-fluid">
      <ul class="nav nav-tabs">
         <li class="active"><a data-toggle="tab" href="#sectionA"><h2>Milestones</h2></a></li>
         <li><a data-toggle="tab" href="#sectionB"><h2>Cost Specifications</h2></a></li>
      </ul>
      <div class="tab-content">
         <div id="sectionA" role="tabpanel" class="tab-pane fade in active">
            <div class="Table_Container">
               <table id="milestones" class="table table-striped table-hover" width="100%">
                  <thead>
                     <tr>
                        <th width = "50px">Pos</th>
                        <th width = "25%">Milestone</th>
                        <th>Assigned to </th>
                        <th>Date Comp.</th>
                        <th>Completed By</th>
                        <th width = "30%">Notes</th>
                        <th width="100px">Actions</th>
                     </tr>
                  </thead>
                  <tfoot>
                     <tr>
                        <th>Pos</th>
                        <th>Milestone</th>
                        <th>Assigned to </th>
                        <th>Date Comp.</th>
                        <th>Completed By</th>
                        <th>Notes</th>
                        <th>Actions</th>
                     </tr>                  
                  </tfoot>
               </table>

            </div>  <!--Table_Container-->
         </div> <!-- sectionA -->
            <div id="sectionB" class="tab-pane fade">
               <div class="Table_Container">
                rtertetete   
               </div>  <!--Table_Container-->
            </div>  <!--sectionB-->   
      </div> <!-- tab-content -->  
   </div>  <!-- bs-example -->

I'm using AJAX to fill the table:

     $('#milestones').DataTable( {
        "bProcessing": true,    
        "bServerSide": true,
        "stateSave": true,
        "sAjaxSource": "/server_side/scripts/DT_ProjectMilestones.php?projectID=<?=$reqId?>",
        "order": [[0, 'asc']],
        "columns" : [
           null,
           null,
           null,               
           null,
           { "orderable" : true,
              "mRender" : function (data, type, full) {
                 if (full['actualDate'] == null ) {
                    return "";
                 } else {
                    var dateString=full['actualDate'].toString();
                    return  UKDateFormatFromDBValue(dateString)  ;
                 }
              }
           },               
           { "orderable" : true,
              "mRender" : function (data, type, full) { 
                 return decodeURIComponent(full['notes'].substring(0,100)); 
              }
           },
           { "orderable" : false,
              "mRender" : function (data, type, full) { 
                 return '<label class="btn btn-info btn-sm" onclick="dspUpdateMilestoneModel(' + full['id'] + ')">Update</label>' ; 
              }
           }
        ]
     } );

rduncecb

I think it might be being caused by the Table_Container div you have around the table. Either remove it if it's not needed or try adding the container-fluid class to it.

ShaneBrennan

Hi rducecb and allan.. both methods don't seem to be working for me... I'll try again on a new page, at a guess there is another div or something interfering.. or I'm missing the obvious.

At the moment I've just used css to set the tab-pane height to 450px... not ideal but it will do as a stop gap,

.tab-pane {
height: 450px;
}