I am working on implementing a bootstrap layout for my razor page that should look like this:
row
.col-8
.col-3 [nested]
.col-9 [nested]
.col-4
row
.col
|---|-----|----|
| ------------ |
Here is what I have currently:
https://i.sstatic.net/28l91.png
The green background represents row 1, while the orange color represents row 2.
I believe the issue with row one's display is due to this code:
<div class="row" style="height:100vh;background:green">
Changing row to this resulted in an undesired layout:
<div class="row" style="background:green">
My goal is to make the third column (large content) match the height of the left-hand column without hard coding it. Using vh-100 solved it but created a gap between the rows.
I want to adhere to best practices and not set a specific max-height constraint on the column.
Any advice or suggestions would be appreciated.
Here is the complete cshtml code I'm working with:
<div class="row" style="height:100vh;background:green">
<div class="col-8 h-50">
<div class="row h-100">
<div class="card col-3 border-right-0 rounded-0">
<img <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad9d8c997ead9ded8c3c4cd84ecc5d8c7cbde">[email protected]</a>("URI/{0}?height=250", Model.UserDisc.EmployeeId0) style="object-fit:cover;width:100%">
</div>
<div class="card col-9 rounded-0">
<ul class="list-group list-group-flush">
<li class="list-group-item">@assocname</li>
<li class="list-group-item">@Model.UserDisc.Title0</li>
<li class="list-group-item">@Model.UserDisc.TelephoneNumber0</li>
<li class="list-group-item">@Model.UserDisc.EmployeeId0</li>
<li class="list-group-item">@Model.UserDisc.Sid0</li>
<li class="list-group-item">@Model.UserDisc.PhysicalDeliveryOfficeNam0</li>
<li class="list-group-item">@Model.UserDisc.HomeDirectory0</li>
<li class="list-group-item">
@if (!(Model.UserDisc.UserAccountControl0 == 512))
{
<a href="#" class="badge badge-danger">AD ACCOUNT: LOCKED</a>
}
else
{
<a href="#" class="badge badge-info">AD ACCOUNT: GOOD</a>
}
</li>
<li class="list-group-item">
Manager: @mg
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
View Direct Reports
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-4 h-50" style="overflow-y:auto">
@{
String isSearching = "visible";
if (Model.CurrentFilter?.Length > 1)
isSearching = "disabled";
else
isSearching = "visible";
}
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div>
Total Groups: @Model.UserGroupMembership?.Count
</div>
<table id="myTable" class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th>Groups</th>
...
<td>
@Html.DisplayFor(modelItem => item.CNIsOnline)
</td>
<td>
@Html.DisplayFor(modelItem => item.CNLastOnlineTime)
</td>
</tr>
}
</tbody>
</table>
</div>
UPDATE:
I adjusted the right column table div as follows:
<div class="wub" style="overflow-y:auto;max-height:50vh;overflow-x:hidden">
Realized using anything other than 100vh works for that property.