I am using Bootstrap 5 and I have a div wrapping my table with the class table-responsive. In my CSS file, I have set the .table-responsive height to be 100% assuming it would take up the total height of the parent div. However, it is overflowing the div and when I set the height to a fixed definition of 300px for example, the table becomes responsive and has the vertical scroll-bars but of course, if I change the viewport height or the size of the browser it doesn't respond dynamically. So on mobile devices, it still overflows.
I am currently generating my tables dynamically in JS and it looks something like this:
function populatePersonnelTable(data) {
var directoryDiv = $("<div></div>").addClass("table-responsive").appendTo('#nav-personnel');
var companyDirectoryPersonnel = $("<table></table>").attr("id", "companyDirectoryPersonnel").addClass("table table-striped table-hover").appendTo(directoryDiv);
var directoryHead = $("<thead></thead>").appendTo(companyDirectoryPersonnel);
var directoryBody = $("<tbody></tbody>").appendTo(companyDirectoryPersonnel);
$('#companyDirectoryPersonnel tbody').empty();
var directoryResult = data;
$("<th></th>").text("Full Name").appendTo(directoryHead);
$("<th></th>").text("Location").appendTo(directoryHead);
$("<th></th>").text("Department").appendTo(directoryHead);
$("<th></th>").text("Edit").appendTo(directoryHead);
$("<th></th>").text("Delete").appendTo(directoryHead);
directoryResult.forEach(function (entry){
... // GENERATING ROWS //
I did originally have the <table> and <thead> already written in the HTML file but decided to also generate them dynamically just in case there were any strange DOM errors.
Here is my HTML document for class references:
<body>
<div class="container custom flex-column">
<div class="row">
<div class="col m-auto p-3"><h1 class="text-center">Company Directory</h1></div>
</div>
<div class="flex-row p-3 mb-2" id="searchAndGo">
<div class="col flex-fill btn-group-sm">
<div class="input-group mb-3">
<input class="form-control" type="text" id="searchQuery" size="20" placeholder="Search Names">
<select id="locations" class="_locations">
</select>
<select id="departments" class="_departments">
</select>
<div class="float-end btn-group">
<button class="btn btn-success" id="startSearch" onclick="startSearch()">GO</button>
<button class="btn btn-danger" onclick="resetAll()">Reset</button>
</div>
</div>
</div>
<div class="flex-row text-center">
<div class="dropdown" id="dropDownContainer">
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Advanced Settings
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2" id="radioSelect">
<li><span class="dropdown-item-text">Search by:</span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="any" type="radio" value="any" name="name" checked><label for="any">Any</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="forename" type="radio" value="forename" name="name"><label for="forename">Forename</label></span></li>
<li><span class="dropdown-item"><input class="custom-control-input" id="surname" type="radio" value="surname" name="name"><label for="surname">Surname</label></span></li>
</ul>
</div>
</div>
</div>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-personnel" role="tab">Personnel</a>
<a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-departments" role="tab">Departments</a>
<a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-locations" role="tab">Locations</a>
</div>
</nav>
<div class="tab-content container p-3" id="myTabContent">
<div class="tab-pane fade show active" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">
<button id="addEntry" class="btn btn-success" onclick="openAddModal()">Add Personnel</button>
</div>
This is the current CSS:
body {
background-color: #85daf1;
height: 100vh;
}
.custom {
background-color: hsl(47, 100%, 93%);
height: 100%;
}
.table-responsive {
height: 100%;
}
When I set a fixed height like 300px this is what it looks like:
.custom is the yellow-y colour main content div. why does my responsive table insist on overflowing? If I set overflow: hidden then none of the content is accessible as no scroll bar generates.
Here is a view of the dev-tools panel:
I have also tried changing the #myTabContents CSS height to 100% and a fixed height in pixels, but that still overflowed, it's as if it's getting height: 100% as the exact height in pixels of the parent div height and not taking up to 100% of it's height and fitting in it.