button is overlapped by footer

Question

button is overlapped by footer

Anjali Agarwal 1,531

I have the following code on the _layout.cshtml page:

@inject IHttpContextAccessor _contextAccessor;

@using Microsoft.AspNetCore.Http

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - Package</title>

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

<link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />

</head>

<header>

    <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">

        <div class="container-fluid">

            <span class="navbar-brand" style="display:flex;">

                <a href="https://www.google.com">

                    <img src="~/Img/Logo_Circle.png" alt="QPR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />

                </a>

                <span style="font-size:25px;color:white;"><span style="color:#e9c46a">Test city</span><br />Test Company</span>

            </span>

            <span class="d-inline-block align-middle mr-5" style="font-size:19px;color:white;">Welcome,  @_contextAccessor.HttpContext.Session.GetString("FullName")</span>

        </div>

    </nav>

</header>

<div class="container-bg">

    <div class="container">

        <main role="main" class="pb-5">

            @RenderBody()

        </main>

    </div>

</div>

@* <footer class="bg-light footer text-center text-lg-start" style="height:20px" >

<div class="container" style="margin-top:12px">

        © Copyright 2023 Test Company | Version 1.0

    </div>

</footer>*@

<footer class="bg-light text-center footer text-lg-start">

        <span class="text-dark"> © Copyright 2023 Test Company | Version 1.0</span>

</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>

My content page submit button is overlapping the footer. Not sure why it is doing that. below is the screen shot:

User's image

The red arrow is the "Submit" button partially hidden behind the footer. My content page has lot of

with input text in between

below is the code for submit button

 <div class="form-group" style="margin-top:20px"  >
                    <input style="float: right; margin-bottom:20px" type="submit" value="Submit" class="btn btn-primary" />
        </div>

I want the footer width to be really less and I want the submit button to be seen clearly. Any help will be highly appreciated.

Accepted answer

0 additional answers

Your answer

Answer 1

Hi @Anjali Agarwal

You can try to change the submit button or its parent container's margin-bottom property or padding-bottom property.

Like this: change the margin-bottom to 60px:

<input style="float: right; margin-bottom:60px" type="submit" value="Submit" class="btn btn-primary" />

Or change submit button's parent element's padding-bottom property.

            <div class="form-group" style="margin-top:20px; padding-bottom:80px;">
                <input style="float: right; margin-bottom:20px" type="submit" value="Submit" class="btn btn-primary" />
            </div>

Besides, you can use F12 developer Elements tools, it is easier to find the html elements and change the CSS style, and then view the CSS update result, after that you can according to it to find the elements and change the CSS style in your application.

For example: find the submit button and change its margin-bottom property, the submit button will move away from the bottom. Or you can change the main element's (submit button's parent container) padding-bottom property.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Share via

button is overlapped by footer

0 additional answers

Your answer