After spending a considerable amount of time searching for a solution, I've come up short on finding an answer to this specific question. In my form, I have 3 tabs declared and within one of them, I aim to display a list of elements in a table. The challenge is to make this table occupy all available height space and be scrollable if the list exceeds the screen length.
<div id="tab_accounts_form" style="display:block">
<div class="tab_form">
<table class="list_tab_form">
@foreach (Company item in ViewBag.CompanyList)
{
<tr class="row_tab_form">
<td class="col_rights_checkbox">
<input type="checkbox" id="@item.ID"/>
</td>
<td class="col_rights_label">
@item.CodeAndName
</td>
</tr>
}
</table>
</div>
</div>
Regarding the CSS:
.row_tab_form td
{
height:19px;
padding: 0 0 0 0;
}
.list_tab_form
{
overflow-x: hidden;
overflow-y: auto;
}
.tab_form
{
width: 100%;
height: 100%;
margin: 2px ;
position: relative;
padding : 23px 0 0 0;
}
.tab_accounts_form
{
height:100%;
}
The issue with the current code is that when the list is longer than the available height, it displays entirely without being scrollable, making the entire page scrollable instead. While setting a fixed height makes the list scrollable, ideally the height should be dynamic to accommodate various screen sizes.
Thank you for any assistance or suggestions!
Edit: Link to the fiddle example: http://jsfiddle.net/yo26bm0w/