Bootstrap 5 table to fill remaining vertical space
I'm using .net core 7 mvc and trying to have a details table scroll and fill the available vertical space in the screen.
I can get the table to scroll by using h-25, h-50, etc. but this just sets the table height as static, not responding to the page getting bigger, or the collapse of the row above.
JSFiddle (updated per comment below) which does demonstrate the issue.
Here is my attempt as a code snippet, which does not actually demonstrate the issue.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div b-vtqmm3i4v1 class="container-fluid overflow-hidden vh-50">
<main b-vtqmm3i4v1 role="main" class="pb-3 overflow-hidden h-100">
<div id="Parent" class="h-100">
<div id="header" class="row">
<div class="row">
<div class="col-1"></div>
<div class="col-6">
This is my header content
</div>
<div class="col">Some more header content</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-6">
This is my header content
</div>
<div class="col">Some more header content</div>
</div>
</div>
<div id="information" class="row">
<div class="panel-title">
<div class="col">
Items
<a role="button" data-bs-toggle="collapse" href="#itemsCollapse" style="font-size:25px">
<i>^</i>
</a>
</div>
</div>
<div id="itemsCollapse" class="collapse show">
<div class="application-subhead d-flex flex-row flex-nowrap">
<div class="col-2">
<a href="#!" class="addItem">Add</a>
</div>
<div class="col itemList" id="itemList">
<div class="row">
<div class="col-1"></div>
<div class="col-1">1</div>
<div class="col">
<input value="Item" id='"item_"' +@i+ '"' class="w-100 item_" />
</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">2</div>
<div class="col">
<input value="Item" id='"item_"' +@i+ '"' class="w-100 item_" />
</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">3</div>
<div class="col">
<input value="Item" id='"item_"' +@i+ '"' class="w-100 item_" />
</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">4</div>
<div class="col">
<input value="Item" id='"item_"' +@i+ '"' class="w-100 item_" />
</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-1">5</div>
<div class="col">
<input value="Item" id='"item_"' +@i+ '"' class="w-100 item_" />
</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col">. . .</div>
</div>
</div>
</div>
</div>
</div>
<div id="details" class="row h-25">
<div class="table-responsive h-100">
<table class="table2 overflow-auto">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Country</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>1</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>2</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>3</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>4</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>11</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>12</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>13</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>14</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>15</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>16</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>17</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>18</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>19</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>20</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>21</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
<tr>
<td>22</td>
<td>First last</td>
<td>flast@gmail.com</td>
<td>123 Any Street MyTown State 00000</td>
<td>USA</td>
<td>555.867.5309</td>
</tr>
<tr>
<td></td>
<td colspan="5">This is my text. It is a really long paragraph and I can go on for days about anything like beefcake pantyhose and all of the strange things that happen in the stongs of Bob Dylan. How old is that guy anyway, he must be like 1000 years
old by now but probaly still touring quite a bit.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
Comments
Post a Comment