Menu
I’m working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
“`
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>@ViewData[“Title”] – Gymfed JuryTool</title>
<link rel=”stylesheet” href=”~/lib/bootstrap/dist/css/bootstrap.min.css” />
<link rel=”stylesheet” href=”~/css/site.css” />
<!– Our Custom CSS –>
<link rel=”stylesheet” href=”~/css/style.css”>
<!– Font Awesome JS –>
<script defer src=”https://use.fontawesome.com/releases/v5.0.13/js/solid.js” integrity=”sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ” crossorigin=”anonymous”></script>
<script defer src=”https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js” integrity=”sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY” crossorigin=”anonymous”></script>
<script src=”https://kit.fontawesome.com/612fd28750.js” crossorigin=”anonymous”></script>
</head>
<body>
<div class=”wrapper”>
<!– Sidebar –>
<nav id=”sidebar”>
<div class=”sidebar-header”>
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class=”list-unstyled components”>
<li class=”active”>
<a asp-area=”” asp-controller=”Home” asp-action=”Index”>
<i class=”fas fa-home”></i>
Start
</a>
</li>
@{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($”userMenu = {JsonConvert.SerializeObject(userMenu)}”);
var controlName = userMenu.MenuName + “SubMenu”;
<li>
<a href=”#@controlName” data-toggle=”collapse” aria-expanded=”false” class=”dropdown-toggle”>
<i class=”fas fa-home”></i>
@userMenu.Caption
</a>
<ul class=”collapse list-unstyled” id=”@controlName”>
@foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($”menuItem = {JsonConvert.SerializeObject(menuItem)}”);
<li>
<a [email protected] [email protected] [email protected]>@menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!– Page Content –>
<div id=”content”>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<div class=”container-fluid”>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”nav navbar-nav ml-auto”>
<li class=”nav-item”>
<partial name=”_LoginPartial” />
</li>
</ul>
</div>
</div>
</nav>
@RenderBody()
</div>
<footer class=”border-top footer text-muted”>
<div class=”container”>
© 2021 – <i>Gymfed</i>
</div>
</footer>
</div>
<script src=”~/lib/jquery/dist/jquery.min.js”></script>
<!– Popper.JS –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js” integrity=”sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ” crossorigin=”anonymous”></script>
<script src=”~/lib/bootstrap/dist/js/bootstrap.bundle.min.js”></script>
<script src=”~/js/site.js” asp-append-version=”true”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#sidebarCollapse’).on(‘click’, function () {
$(‘#sidebar’).toggleClass(‘active’);
});
});
</script>
@await RenderSectionAsync(“Scripts”, required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%…
I was wondering how I can have this happen automatically? Been looking around, but can’t seem to find an actual answer to my question.