How to change layout.cshtml’s navbar length dynamically
I have a C# application which in which I want to change length of _layout.cshtml ‘s Navbar.
For big screen Since table is properly shown so no problem in that case. But when open in small screen like laptop my container starts having a scroll bar in below to move left to right and vice versa. But on moving right on small screen Layouts are not completed till end as shown below image:
My _Layout.cshtml code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Device_Migration_Admin_Portal</title>
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="icon" href="~/wdfavicon.ico" type="image/x-icon"> <!-- Add this line to set the favicon -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.header-logo-container {
text-align:left;
margin-bottom: 5px;
margin-top: 0px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-black border-bottom box-shadow mb-3">
<div class="container-fluid">
<!-- Added container-fluid class -->
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
<img src="/images/ New-logo.png" alt="Logo" style="height:45px;margin-right: 10px;">
Admin Portal
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between align-items-center">
<ul class="navbar-nav flex-grow-1 justify-content-center">
<!--<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Graph</a>
</li>-->
</ul>
<ul class="navbar-nav">
@if (User.Identity.IsAuthenticated)
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@User.Identity.Name
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<!--<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>-->
<li><a class="dropdown-item" asp-area="" asp-controller="Account" asp-action="SignOut">Logout</a></li>
</ul>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>
</li>
}
</ul>
<!---<img src="/images/WD-New-logo.png" alt="Logo" style="height: 40px;margin-right: 10px;">-->
</div>
</div>
</nav>
</header>
<!--<div class="header-logo-container">
<img src="/images/Western-Digital-logo.png" alt="Logo" style="height: 50px;">
</div>-->
<div class="container">
<main role="main">
@RenderBody()
</main>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
_Layout.cshtml.css:
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
a {
color: #0077cc;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
My Container and Table styles present in another index.cshtml
<style>
/* Add custom styles for the container */
.container {
display: flex;
align-items: flex-start; /* Align items at the top */
gap: 20px; /* Space between the two containers */
padding: 20px; /* Added padding to increase container size */
margin: 0 auto; /* Center the container horizontally */
max-width: 100%; /* Ensure it doesn't exceed the viewport width */
}
/* Style for filter and export dropdown */
.dropdown {
margin-left: 10px; /* Add spacing between filter and dropdown */
}
/* Add custom styles for the table */
.dataTables_filter {
display: none;
}
.table-container {
margin-top: 20px;
overflow-x: auto; /* Enable horizontal scrolling if necessary */
display: flex;
justify-content: center; /* Center the table horizontally */
width: 100%; /* Ensure the container spans the full width */
}
.table {
min-width: 1500px; /* Set a minimum width to prevent column overlap */
table-layout: fixed;
width: 100%; /* Ensure the table spans the full width of the container */
}
</style>
As I’m new to this any help will be thankfull. Just wanted to increase size of Navbar in small screens.
The issue now we are facing is that the width of the website is not good for small screen, it will appear scroll-x which will make the left nav bar be hidden so that we can't click it. Solution one is that we only set overflow-x to the right main content, so that only the main content will have scroll like screenshot below. I manully set max-width to mock the small screen.
In the meantime, I noticed that you already set width=device-width and use percentage expression for width, but you have min-width: 1500px; for .table class, this shall be one of the reason to appear scroll-x. I mean if you have some other class which defining with px, it will also cause the scroll bar. In this scenario, we can also define overflow-x:scroll; for the main content. And don't forget to set overflow-x:hidden for the parent DOM element to make sure there won't be a scroll-x bar for the whole page.
We can see that without overflow-x:hidden for the parent DOM will still cause the scroll bar for the whole page.
Solution 2 is that we could set different style with midea query, I had a test in this case which setting @media (min-width: 500px) which means this style will only be applied when current window width is greater than 500px. If the current width is smaller than 500px, this style won't take effect.