Answers

• rduncecb Posts: 125Questions: 2Answers: 28

  August 2017

  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 Posts: 63,161Questions: 1Answers: 10,406 Site admin

  August 2017

  This example shows what you are looking for.

  Allan
• ShaneBrennan Posts: 49Questions: 18Answers: 1

  August 2017 edited August 2017

  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 Posts: 125Questions: 2Answers: 28

  August 2017 Answer ✓

  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 Posts: 49Questions: 18Answers: 1

  August 2017

  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;
  }