Currently, I am trying to utilize angular in conjunction with bootstrap to present my data. I have mock data stored within a component and displayed in the html file of that component. However, I am facing an issue where when the table expands in size, it does not appropriately adjust (become responsive) to fit its parent container. Instead, it overflows beyond the container and extends into the footer component.
This snippet highlights my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title goes here</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Furthermore, this is my app.component.html, essentially directing to my home component:
<router-outlet></router-outlet>
The following represents my home.component.html:
<div class="container-fluid" style="height: 100%; background-color: rgba(255,0,0,0.1);">
<div class="row" style="height:13%; background-color: rgba(136, 255, 0, 0.1)">
<div class="col-md-12">
<app-header></app-header>
</div>
</div>
<div class="row" style="height:77%;">
<div class="col-md-2" style="height:100%; background-color: rgba(255, 0, 179, 0.1)">
<app-sidemenu></app-sidemenu>
</div>
<div class="col-md-10" style="height:100%; background-color: rgba(170, 48, 58, 0.1)">
<app-cashplanner></app-cashplanner>
</div>
</div>
<div class="row" style="height:10%; background-color: rgba(16, 16, 212, 0.1)">
<div class="col-md-12">
<app-footer></app-footer>
</div>
</div>
</div>
The data meant for display resides within the <app-cashplanner> component.
The contents of the cashplanner.component.html appear as follows (imagine numerous rows are present here):
<div class="container">
<div class="row">
<table id="dt-material-checkbox" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th class="th-sm">Position
</th>
<th class="th-sm">Office
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Start date
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name
</th>
<th>Position
</th>
<th>Office
</th>
<th>Age
</th>
<th>Start date
</th>
<th>Salaryzz
</th>
</tr>
</tfoot>
</table>
</div>
</div>
Hence, the abovementioned table in my cashplanner spills out of its container once viewed in the browser, without the footer dynamically adjusting to the table above it. While I plan to implement pagination for the data, my understanding was that the bootstrap classes should adapt accordingly to both the browser and its encapsulating div tags.
To visualize this concern, you can view the illustration below where the overflow occurs...