asp.netasp.net-coremodel-view-controllerrazorbootstrap-4
Why is the razor page rendering under the bootstrap sticky header in Asp.net Core MVC
I'm trying to learn Asp.Net Core MVC using .net 5 with the pre-built, scaffolded razor identity pages. I'm getting this rendered result when I click login or register from the sticky header. How do I format the (razor) login page(s) to start below the sticky header? The sticky header is from a bootstrap theme that worked fine prior to the scaffolled pages. I did not touch the css code as I don't know what I'm doing there.
Razor page under sticky header
The Login Page looks like this...
@page
@model LoginModel
@{
ViewData["Title"] = "Log in";
}
<div mt-3>
<h1>@ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
</div>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
This is the _Layout Code
<!DOCTYPE html>
<!--Home Layout Page-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@ViewData["Title"] - SRP</title>
<link href="~/css/style-liberty.css" rel="stylesheet" />
<a href="~/fonts/fontawesome-webfont.eot"></a>
<a href="~/fonts/fontawesome-webfont.ttf"></a>
<a href="~/fonts/fontawesome-webfont.woff"></a>
<a href="~/fonts/fontawesome-webfont.woff2"></a>
<a href="~/fonts/FontAwesome.otf"></a>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.countup.js"></script>
<script src="~/js/jquery.magnific-popup.min.js"></script>
<script src="~/js/jquery.waypoints.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/theme-change.js"></script>
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" asp-area="" asp-controller="Main" asp-action="Index">
<span>THIS IS THE HOME PAGE</span>
</a>
</h1>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa icon-expand fa-bars"></span>
<span class="fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Services">Services</a>
</li>
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="blog.html" class="drop-text">Blog Posts</a>
<a class="dropdown-item" href="blog-single.html" class="drop-text">
Blog
Single post
</a>
</div>
</li>*@
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="error.html" class="drop-text">404</a>
<a class="dropdown-item" href="contact.html" class="drop-text">Contact</a>
<a class="dropdown-item" href="landing-single.html" class="drop-text">Landing page</a>
</div>
</li>*@
</ul>
<ul class="navbar-nav search-right mt-lg-0 mt-2">
<li class="nav-item mr-3" title="Search">
<a href="#search" class="btn search-search">
<span class="fa fa-search" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary d-none d-lg-block btn-style mr-2" asp-area="" asp-controller="Home" asp-action="ContactUs">Contact Us</a>
@*<a href="contact.html" class="btn btn-primary d-none d-lg-block btn-style mr-2">
Contact Us*@
</a>
</li>
</ul>
<partial name="_LoginPartial" />
<!-- //toggle switch for light and dark theme -->
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-sm-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
<a class="close" href="#url">×</a>
</form>
</div>
</div>
<!-- /search popup -->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<span class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</span>
</label>
</div>
</nav>
</div>
</nav>
</div>
</header>
<!--/header-->
<div class="container-fluid bod-2">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<!-- footer-66 -->
<footer class="w3l-footer-66">
<section class="footer-inner-main">
<div class="footer-hny-grids py-5">
<div class="container py-lg-4">
<div class="text-txt">
<div class="row newsletter-grids-footer">
<div class="col-lg-6 newsletter-text pr-lg-5">
<h3 class="hny-title two">Newsletter</h3>
<h4>
Sign up for our monthly newsletter to get the latest news, volunteer opportunities,
</h4>
</div>
<div class="col-lg-6 newsletter-right">
<form action="#" method="post" class="footer-newsletter">
<input type="email" name="email" class="form-input" placeholder="Enter your email..">
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</div>
<div class="right-side">
<div class="row sub-columns">
<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
<h2>
<a class="navbar-brand" href="index.html">
<span>Capture & Response</span>
</a>
</h2>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<p class="pr-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur hic odio voluptatem tenetur consequatur.Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<div class="columns-2">
<ul class="social">
<li>
<a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
</li>
<li>
<a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
</li>
<li>
<a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
</li>
<li>
<a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
</li>
<li>
<a href="#github"><span class="fa fa-github" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Our Services</h6>
<div class="mid-footer-gd sub-two-right">
<ul>
<li>
<a href="about.html"><span class="fa fa-angle-double-right mr-2"></span> About</a>
</li>
<li>
<a href="services.html"><span class="fa fa-angle-double-right mr-2"></span> Services</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span> Car Wash</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Electrical system</a>
</li>
</ul>
<ul>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Tire and wheel</a>
</li>
<li>
<a href="#">
<span class="fa fa-angle-double-right mr-2"></span>Help
Orphan
</a>
</li>
<li><a href="#support"><span class="fa fa-angle-double-right mr-2"></span>Career</a></li>
<li>
<a href="contact.html"><span class="fa fa-angle-double-right mr-2"></span>Contact US</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Contact Info</h6>
<div class="sub-contact-info">
<p>Address: 8436 Jasmine Parkway, Mountain View, CA 84043, United States.</p>
<p class="my-3">Phone: <strong><a href="tel:+24160033999">+24 1600-33-999</a></strong></p>
<p>E-mail:<strong> <a href="mailto:[email protected]">[email protected]</a></strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-section">
<div class="container">
<div class="copyright-footer">
<div class="columns text-lg-left">
<p>© 2020 Capature & Response. All rights reserved.</p>
</div>
<ul class="columns text-lg-right">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>|</li>
<li>
<a href="#">Terms Of Use</a>
</li>
</ul>
</div>
</div>
</div>
<!-- copyright -->
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
<span class="fa fa-long-arrow-up" aria-hidden="true"></span>
</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- /move top -->
</section>
</footer>
<!--//footer-66 -->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - SRP01 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<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)
</body>
</html>
Solution
Here is the style of fixed-top:
An element with position: fixed;does not leave a gap in the page where it would normally have been located.So that's why you get the rendered result.
If you want to format the (razor) login page(s) to start below the sticky header,try to remove class="fixed-top" in your _Layout <header id="site-header" class="fixed-top">.
If you don't want to remove fixed-top.You can also use the following style in _Layout to cover position: fixed; in .fixed-top:
<style>
.fixed-top {
position:initial;
}
</style>
- ASP.NET OleDbConnection Problem
- ListView with DataPager not working
- Server side paging with ajax & jQuery
- How to implement paging for asp:DataList in .NET 2.0?
- How to use RouteValues using MvcPaging2.0 in MVC3?
- Dynamically Added LinkButtons Don't Fire OnClick Event
- GraphServiceClient filter issue
- Using DropDown_SelectedIndexChanged to bind gridview, but paging is not working
- Paging results in asp.net
- Retrieve 10 records from MySQL?
- Pageddatasource fails paging With "does not implement ICollection."
- how change the RadDataPager Page# From CodeBehind (server-side)
- Jquery code doesn't work after paging?
- jqGrid Group summary not showing total sum with paging
- Showing image in datalist asp.net
- ASP.NET paging in div
- GridView from CodeBehind in C# Paging not working
- ObjectDataSource paging and extra parameters
- Google Like Paging in asp.net c#
- asp.net subsonic 2.2 paging linked table collection
- Datagrid paging align right
- ASP.net inserted row in Datatable disappearing on page change
- How to remember the selected checkboxes between each paging-press
- How to force Visual Studio to re-create the SSL certificate for a .NET Core Web Application running Kestrel?
- Efficient paging with Repeater, SQL Server and custom Pager
- listview item indexing
- Simple Paging in datalist as in GridView - NOT CUSTOM PAGING
- On page load, navigate to a specific page where a listviewitem belongs using listview and datapager?
- Fill datagrid with paging enabled in asp.net
- How to remove paging text in excel sheet while exporting data from GridView to Excelsheet?