ASP.Net Core model bound form squished when padding/positioning is added

Question

I am having troubles with this particular form when it comes to trying to format the page, adding a header and moving the rest of the content down 10% of the screen so headings aren't hidden underneath the header that I am putting in. This CSS works properly for other pages, simply moving content down 10% (I have tried using padding as well):

.content{
    position: absolute;
    top: 10%;
}

however when I put it to this particular form, it squishes all of my form elements Picture of Squished form elements. I am not quite sure what would be causeing this, as I am just trying to add space above the form.

Here is the form code on that .cshtml page(this form is 90% pre-generated code by Visual Studios 2019 and works prior to the <div class="content"> tag):

<div class="content">
            <div class="row">
                <div class="col-md-4">
                    <form asp-action="Edit">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" asp-for="@Model.id" class="form-control" />

                        <div class="form-group">
                            <label asp-for="FirstName" class="control-label"></label>
                            <input asp-for="FirstName" class="form-control" value="@Model.FirstName" />
                            <span asp-validation-for="FirstName" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="LastName" class="control-label"></label>
                            <input asp-for="LastName" class="form-control" value="@Model.LastName" />
                            <span asp-validation-for="LastName" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Username" class="control-label"></label>
                            <input asp-for="Username" class="form-control" value="@Model.Username" />
                            <span asp-validation-for="Username" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Password" class="control-label"></label>
                            <input asp-for="Password" class="form-control" value="@Model.Password" />
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="StreetAddress" class="control-label"></label>
                            <input asp-for="StreetAddress" class="form-control" value="@Model.StreetAddress" />
                            <span asp-validation-for="StreetAddress" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="City" class="control-label"></label>
                            <input asp-for="City" class="form-control" value="@Model.City" />
                            <span asp-validation-for="City" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="State" class="control-label"></label>
                            <input asp-for="State" class="form-control" value="@Model.State" />
                            <span asp-validation-for="State" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="ZipCode" class="control-label"></label>
                            <input asp-for="ZipCode" class="form-control" value="@Model.ZipCode" />
                            <span asp-validation-for="ZipCode" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="ApprovalStatus" class="control-label"></label>
                            <input asp-for="ApprovalStatus" class="form-control" value="@Model.ApprovalStatus" />
                            <span asp-validation-for="ApprovalStatus" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Save" class="btn btn-primary" />
                            <input type="reset" value="Cancel" class="btn btn-primary" asp-action="ManageVolunteers" />
                        </div>
                    </form>
                </div>
            </div>

            <div>
                <a asp-action="Landing">Back to List</a>
            </div>
        </div>

FYI: the remaining html on this page (Directly above the form).

        <div class="header">
            <img src="~/Images/BitworksLogo.png" id="header-img" />
            <h2>Volunteer Management System</h2>
        </div>

        <h1>Edit</h1>

        <hr />

Edit: I have now tried it on multiple forms of the same nature (ASP.Net-core .cshtml model-bound forms) and the same pattern happens with those fields and labels, in terms of them being squished. Id this a possible but between model-bound forms themselves? Is there another way that works and shows the same output?

Answer 1

It likely shrinks due to the fact that the content class has absolute positioning, but has no parent element that is full width. You could simply add the property width: 100%; to the .content class and then it would look more normal.

But you can (and probably should) avoid using position absolute all together in this case.

A better way would be to set header to have a fixed height and remove the position property from content.

.header {
  height: 100px;
}
.content {
 // removed all properties. 
}

Now this results in the header and the content being relatively positioned to each other, and so they will stack on top of each other.