CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
raj
raj

Reputation: 388

Bootstrap div overlapping on window resize

enter image description here In bootstrap both divs are overlapping with each other when resizing window in bootstrap. I am using angular for data points in table See the preview : https://plnkr.co/edit/VKgh1su6HIueDhzWq497?p=preview

<div class="container">
    <div class="row">
        <div class="col-sm-3">
<!--      <h3></h3>-->
            <!-- <table class="table"  border ="1" cellpadding="0" cellspacing="0" style="height:100%;" -->
            <table class="table"  border ="1"  >
                <thead>
                    <tr>
                        <th colspan="2" >
                          &nbsp;   &nbsp;  &nbsp;   Checker Statistics
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>
                               <br> Period
                        </td>    
                        <th>
                            <ul>
                                <li>Yesterday</li>
                                <li>Today</li>
                                <li>This week</li>
                                <li>This month</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <th>
                                From
                        </th>
                        <td>
                                <input type="text" name="">
                        </td>
                    </tr>
                    <tr>
                        <th>
                                To
                        </th>
                        <td>
                                <input type="text" name="">
                        </td>
                    </tr>
                     <tr>
                        <th colspan="2">
                                Filter Out Tests
                                &nbsp;
                                &nbsp;
                                 <input type="checkbox" class="custom-control-input">
                                 <span class="custom-control-indicator"></span>

                           <!--      <input type="checkbox" class="hidden" /> -->
                                </span> 
                        </th>
                    </tr>
                     <tr>
                        <th colspan="2">
                                Compare Tests
                                &nbsp;
                                &nbsp;
                                <input type="checkbox" class="custom-control-input">
                                 <span class="custom-control-indicator"></span>
                        </th>
                    </tr> 
                    <tr>

                    </tr>
                      <tr>

                    </tr>

                      <tr>

                    </tr>



                </tbody>
            </table>
<!--      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>-->
        </div>


        <div class="col-sm-9">

             <div class="table-responsive"  >      
              <h4 align ="center">Site Data</h4>
                    <table class="table" border ="1">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Site</th>
                        <th>Jobs</th>
                        <th>Success</th>
                        <th>Failed</th>
                        <!-- <th ng-bind="test"></th> -->
                      </tr>
                    </thead>
                    <tbody>
                       <tr ng-repeat="siteData in data">
                        <td>{{siteData.site}}</td>
                        <td>{{siteData.site}}</td>
                        <td>{{siteData.Jobs}}</td>
                        <td>{{siteData.Success}}</td>
                        <td>{{siteData.Failure}}</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 947

Answers (3)

Ayyaj Inamdar
Ayyaj Inamdar

Reputation: 41

You can try this

You forgot to use table-responsive div to first table.

HTML:

<div class="container">
<div class="row">
  <div class="col-sm-3">
    <div class="table-responsive">
      <table class="table" border="1">
        <thead>
          <tr>
            <th colspan="2">
              &nbsp; &nbsp; &nbsp; Checker Statistics
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>
              <br> Period
              </td>
              <th>
                <ul>
                  <li>Yesterday</li>
                  <li>Today</li>
                  <li>This week</li>
                  <li>This month</li>
                </ul>
                </td>
          </tr>
          <tr>
            <th>
              From
            </th>
            <td>
              <input type="text" name="">
            </td>
          </tr>
          <tr>
            <th>
              To
            </th>
            <td>
              <input type="text" name="">
            </td>
          </tr>
          <tr>
            <th colspan="2">
              Filter Out Tests &nbsp; &nbsp;
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
              </span>
            </th>
          </tr>
          <tr>
            <th colspan="2">
              Compare Tests &nbsp; &nbsp;
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-indicator"></span>
            </th>
          </tr>
          <tr>
          </tr>
          <tr>
          </tr>
          <tr>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <div class="col-sm-9">

    <div class="table-responsive">
      <h4 align="center">Site Data</h4>
      <table class="table" border="1">
        <thead>
          <tr>
            <th>#</th>
            <th>Site</th>
            <th>Jobs</th>
            <th>Success</th>
            <th>Failed</th>
            <!-- <th ng-bind="test"></th> -->
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="siteData in data">
            <td>{{siteData.site}}</td>
            <td>{{siteData.site}}</td>
            <td>{{siteData.Jobs}}</td>
            <td>{{siteData.Success}}</td>
            <td>{{siteData.Failure}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Then it will work...:)

Upvotes: 1

kristinalim
kristinalim

Reputation: 3459

The first table cannot fit in one-fourth of the container area in small (sm) screens.

You can change col-sm-3 and col-sm-9 to col-md-3 and col-md-9 respectively, that way the tables will be laid out beside each other only in medium (md) screens and wider.

Upvotes: 0

Joint
Joint

Reputation: 1218

Include first table in <div class="table-responsive"></div> just like you did for the second table

Upvotes: 0

Related Questions