Hi,
How to get rid of white spaces appearig after the navigation section and before the body section? is it a specific page or an html element like body?
_Layout.cshtml:
@using ExpenseTracker.Data;
@using Microsoft.AspNetCore.Identity
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/bootstrap5-dark.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/ExpenseTracker.styles.css" asp-append-version="true" />
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdn.syncfusion.com/ej2/22.2.5/dist/ej2.min.js"></script>
</head >
<body class="e-bigger">
<partial name = "_SideBar" />
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="" asp-action="">ExpenseTracker</a>
<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
@if (UserManager.GetUserAsync(User)?.Result?.PictureSource != null)
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity?.Name!</a>
</li>
}
else
{
<li class="nav-item">
<a class="form-inline" title="Manage">Hello @User.Identity?.Name!</a>
</li>
}
<li class="nav-item">
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Dashboard", new { area = "" })">
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
</div>
</nav>
</header>
<div class="main-content">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="@(ViewData["isDashboard"] == null)? col-md-10 : col-md-12">
<main role="main" class="pb-3">
@if(ViewData["isDashboard"] == null)
{
<div class="row">
<div class="col-md-7">
<div class="d-flex flex-column mb-5">
<div class="d-flex mb-1">
<div class="flex-grow-1">
<h3 class="fw-bold">@ViewData["PageTitle"]</h3>
</div>
<div>
@if(ViewData["PageActionText"] !=null)
{
<a class="btn btn-success" href="@ViewData["PageActionUrl"]">
@ViewData["PageActionText"]
</a>
}
</div>
</div>
@if (ViewData["PageActionText"] != null)
{
<ejs-breadcrumb id="breadcrumb"
separatorTemplate="@Html.Raw("<span class='fa-solid fa-angle-right'></span>")"></ejs-breadcrumb>
}
</div>
</div>
</div>
}
@RenderBody()
</main>
</div>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
<ejs-scripts></ejs-scripts>
</body>
</html>
