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

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!

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

1 solution

Solution 1

Add your solution here

Preview 0

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us