Partial view is obstructed and not showing properly in ASP .NET MVC

Question

0.00/5 (No votes)

See more:

Hello, I am now working on a .NET MVC app and have a problem with my partial view. It renders within main view, but the top of the partial view which I mentioned before is being cut at the top.

Here are pictures:
This is how it looks now
This is how it should look like

My code:
Partial view:

C#

@using EPiServer.Framework.Web.Resources
@using Brands = Rockwool.RockWorld.BusinessLogic.Enums.Brands
@{
	Layout = "~/Views/Layouts/ToolsLayout.cshtml";
	ViewBag.SectionTitle = "Generate Reports: Organism, Page, Activity";
}

@Html.Raw(Html.ShellInitializationScript())
	<div class="epi-contentContainer epi-padding">
		<div class="epi-contentArea">
			<h1 class="EP-prefix">
				Create page report
			</h1>
			<p class="EP-systemInfo">This tool will generate report about current pages used by Episerver. Report is created in exported in Excel file. The download button tries to download the latest version from the server. The generate button tries to create a new version of the report, it may take some time</p>
			<div class="form-container">
				@using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					@Html.Hidden("requestReportName", "PageReport");

					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitDownloadPageReport" id="btnSubmitDownloadPageReport" value="Download Report" />
					}
			</div>
			<div class="form-container">
				@using (Html.BeginForm("GeneratePageReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-File" type="submit" name="btnSubmitGeneratePageReport" id="btnSubmiGeneratetPageReport" value="Generate Report" />
					}
			</div>
		</div>
	</div>
	<div class="epi-contentContainer epi-padding">
		<div class="epi-contentArea">
			<h1 class="EP-prefix">
				Create product report
			</h1>
			<p class="EP-systemInfo">This tool will generate report about current products existing in Commerce. Report is created and exported to Excel file. The download button tries to download the latest version from the server. The generate button tries to create a new version of the report, it may take some time</p>
			<div class="form-container">
				@using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					@Html.Hidden("requestReportName", "ProductReport");

					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitDownloadPageReport" id="btnSubmitDownloadPageReport" value="Download Report" />
					}
			</div>
			<div class="form-container">
				@using (Html.BeginForm("GenerateProductReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-File" type="submit" name="btnSubmitGeneratePageReport" id="btnSubmiGeneratetPageReport" value="Generate Report" />
					}
			</div>
		</div>
	</div>
	<div class="epi-contentContainer epi-padding">
		<div class="epi-contentArea">
			<h1 class="EP-prefix">
				Create activity logs report
			</h1>
			<p class="EP-systemInfo">This tool will generate report about activity logs. Report is created and exported to Excel file. The download button tries to download the latest version from the server. The generate button tries to create a new version of the report, it may take some time</p>
			<div class="form-container">
				@using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					@Html.Hidden("requestReportName", "ActivityLogsReport");

					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitDownloadActivityLogsReport" id="btnSubmitDownloadActivityLogsReport" value="Download Report" />
					}
			</div>
			<div class="form-container">
				@using (Html.BeginForm("GenerateActivityLogsReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-File" type="submit" name="btnSubmiGeneratetActivityLogsReport" id="btnSubmiGeneratetActivityLogsReport" value="Generate Report" />
					}
			</div>
		</div>
	</div>
	<div class="epi-contentContainer epi-padding">
		<div class="epi-contentArea">
			<h1 class="EP-prefix">
				Create Rockwool Master obsolete content report
			</h1>
			<p class="EP-systemInfo">This tool will generate report about all obsolete content used on RockwoolMaster 2.0 including all commerce catalogs assigned to page</p>
			<div class="form-container">
				@using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					@Html.Hidden("requestReportName", "RockwoolObsoleteContentPageReport");

					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitDownloadRockwoolObsoleteContentPageReport" id="btnSubmitDownloadRockwoolObsoleteContentPageReport" value="Download Report" />
					}
			</div>
			<div class="form-container">
				@using (Html.BeginForm("GenerateRockwoolObsoleteContentReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
				{
					
						<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-File" type="submit" name="btnSubmitGenerateRockwoolObsoleteContentReport" id="btnSubmitGenerateRockwoolObsoleteContentReport" value="Generate Report" />
					}
			</div>
		</div>
	</div>
	<div class="epi-contentContainer epi-padding">
    	<div class="epi-contentArea">
    		<h1 class="EP-prefix">
    			Report of pages with deleted images
    		</h1>
    		<p class="EP-systemInfo">This tool will generate report about all pages, which have deleted images inside. They are incorrect, so we need to fix them.</p>
    		<div class="form-container">
    			@using (Html.BeginForm("DownloadReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
    			{
    				@Html.Hidden("requestReportName", "PagesWithDeletedImagesReport");

    				
    					<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Export" type="submit" name="btnSubmitPagesWithDeletedImagesReport" id="btnSubmitPagesWithDeletedImagesReport" value="Download Report" />
    				}
    		</div>
    		<div class="form-container">
    			@using (Html.BeginForm("GeneratePagesWithDeletedImagesReport", "Admin/Report", FormMethod.Post, new { enctype = "multipart/form-data" }))
    			{
    				
    					<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-File" type="submit" name="btnSubmitPagesWithDeletedImagesReport" id="btnSubmitGenerateRockwoolObsoleteContentReport" value="Generate Report" />
    				}
    		</div>
    	</div>
    </div>

Main view:

C#

@using EPiServer.Shell.Navigation

@{
	ViewBag.SectionTitle = string.Empty;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>@ViewBag.Title</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<style>
		.form-container {
			display: inline-block;
		}
		.copy-button {
			cursor: pointer;
		}

		textarea {
			margin-top: 0px;
			margin-bottom: 0px;
			height: 38px;
		}
		.App {
  		position: absolute;
  		z-index: 1060;
        }
		.epi-buttonDefault {
			display: flex;
		}
		@* .epi-contentContainer epi-padding {
			margin-top: 200px;
		} *@
		

	.loader {
		border: 5px solid #f3f3f3; /* Light grey */
		border-top: 5px solid #3498db; /* Blue */
		border-radius: 50%;
		width: 14px;
		height: 14px;
		animation: spin 2s linear infinite;
	}

	@@keyframes spin {
	 0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
	</style>
</head>
<body>
	@Html.Raw(Html.CreatePlatformNavigationMenu())
	<div id="epi-navigation-container" @Html.ApplyPlatformNavigation()></div>
	<div>
		@RenderBody()
	</div>
</body>
</html>

What I have tried:

I have tried adding spacing utilities like (mt-5 and pt-5) to class names and custom CSS to increase padding and margin between elements, yet nothing worked.

What am I doing wrong?

Posted 15-Jul-22 2:45am

Member 15341738

Updated 15-Jul-22 14:36pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Answer 1 · 2022-07-15T14:36:00

I can't see what html is being rendered, so it makes it difficult to see the full picture of what is happening.

At a guess, the header/navbar is using class app / position: absolute;. Your Content container element has margin-top: 0;, electively doing what you are seeing. Quick Fix is to set margin-top to a size that pushes the content top below the header.

A better solution for your layout is to use position: sticky;.

For example:

HTML

<main>
    <header>HEADER</header>
    <article>
        <p> Body 1</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body 5</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body 10</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body</p>
        <p> Body 15</p>
        <p> Body</p>
        <p> Body</p>
    </article>
</main>

and the CSS:

CSS

main {
    background-color: yellow;
}

header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: red;
}

article {
    background-color: green;
}

p {
    background-color: blue;
}

The background-color is only used to help visualize what is happening.

Fire up VS Code or your fav editor, add the code and view in a web browser. Shrink the window to get a scrollbar, and test.

Hope this helps!