Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style heights, but it seems to affect the form's positioning in the center of the page. Any guidance on resolving this issue would be highly appreciated.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">

    <div class="container">

        <a class="navbar-brand" href="login.php">Web App</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">

            <ul class="navbar-nav ml-auto">

                <li class="nav-item">
                    <a class="nav-link" href="splash.php">Choose Login</a>
                </li>

            </ul>

        </div>

    </div>

</nav>

<section id="cover" class="min-vh-100">
        <div id="cover-caption">
            <div class="container">
                <div class="row text-white">
                    <div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
                        <h1 class="display-4 py-2 text-truncate">Student Login.</h1>
                        <div class="px-2">
                            <form action="" method="POST" autocomplete="off" class="justify-content-center">
                                <div class="form-group">
                                    <label class="sr-only" for="studentnumber">Student Number:</label>
                                    <input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password">Password:</label>
                                    <input type="password" class="form-control" name="password" placeholder="Password">
                                </div>
                                <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> 



<style>
    #cover {
        background-size: cover;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        position: relative;
    }

    #cover-caption {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    /* only used for background overlay not needed for centering */
    form:before {
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: -1;
        border-radius: 10px;
    }
</style>
htmlcssforms

Answer №1

Try incorporating the fixed-top class to address your issue. Another alternative is to utilize flexbox instead of the min-vh-100 class.

   #cover {
     background-size: cover;
     height: 100%;
     text-align: center;
     display: flex;
     align-items: center;
     position: relative;
   }

   #cover-caption {
     width: 100%;
     position: relative;
     z-index: 1;
   }

   /* only used for background overlay not needed for centering */
   form:before {
     content: '';
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.3);
     z-index: -1;
     border-radius: 10px;
   }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top fixed-top">

  <div class="container">

    <a class="navbar-brand" href="login.php">Web App</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

...
              <input type="number" min="1" class="form-control" name="studentnumber" placeholder="Student Number">
              <label class="sr-only" for="password">Password:</label>
              <input type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №2

You might want to consider using mine

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stack Overflow</title>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="login.php">Web App</a>

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="splash.php">Choose Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section id="cover" class="min-vh-100">
      <div id="cover-caption">
        <div class="container">
          <div class="row text-white">
            <div
              class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4"
            >
              <h1 class="display-4 py-2 text-truncate">Student Login.</h1>
              <div class="px-2">
                <form
                  action=""
                  method="POST"
                  autocomplete="off"
                  class="justify-content-center"
                >
                  <div class="form-group">
                    <label class="sr-only" for="studentnumber"
                      >Student Number:</label
                    >
                    <input
                      type="number"
                      min="1"
                      class="form-control"
                      name="studentnumber"
                      placeholder="Student Number"
                    />
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="password">Password:</label>
                    <input
                      type="password"
                      class="form-control"
                      name="password"
                      placeholder="Password"
                    />
                  </div>
                  <button
                    type="submit"
                    name="submit"
                    class="btn btn-primary btn-lg"
                  >
                    Submit
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

CSS:

#cover {
  background-size: cover;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
}

#cover-caption {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* only used for background overlay not needed for centering */
form:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  border-radius: 10px;
}

I hope you find this useful! ^_^

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

javascripthtmlcssreactjs

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

Create a div element within the parent window of the iFrame

I'm trying to figure out how I can click a button within an iFrame that contains the following code: <td class="id-center"> <div class="bs-example"> <a id="comments" href="comments.php?id=$id" name="commen ...

javascriptjqueryhtmliframe

Clearly defined form field even with the inclusion of value=" "

I have a database that I am using to display data in an HTML form for user editing. <input type="text" id="name" placeholder="Name" required = "true" value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>> ...

javascriptphpjqueryhtml

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible for me to add some PHP code to the action of a form?

Within a foreach loop, I have the following code that lists unique codes as links: <a href="" class="charcoal_link" style="line-height: 20px;" onclick="showMessageArea(this); return false;" > <?php echo $uniqueCode1?><span class="pink_tex ...

phphtml

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Maintaining nth-child(odd) following filtering using jQuery

I am using a jQuery script to filter a table with multiple entries on this site. The filtering works well, but the issue arises when it comes to maintaining the correct tr:nth-child(odd) color that I have specified in my CSS. After filtering, the original ...

jqueryhtmlcss

The Verdana font in Microsoft Word appears with a distinct rendering when converted to an HTML-based

I'm currently working on generating a PDF from an HTML template. Our customer provided the template they previously used in Word, and they require the font to be Verdana. The challenge I'm facing is that Verdana looks smaller and has a different ...

htmlcssasp.net-corefontsselectpdf

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

cssreactjssassflexboxmaterial-ui

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

javascripthtmlasp.netasp.net-mvc

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Accessing a precise div element in a webpage

Currently, I am utilizing Vue.js and Nuxt for my web development. One issue I am facing is related to anchors. Specifically, when I navigate to mysite.com/page1#section1, I want the page to scroll to section1. In my code, I have the following snippet: < ...

javascripthtmlvue.js

Creating line breaks in Bootstrap input group formatting

My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkbox ...

htmlcsstwitter-bootstrap

Tips for resolving the issue of windows resizing due to off-screen elementsplacement:

During the development of a project, I wanted to incorporate an effect into my webpage. To achieve this, I positioned elements off the screen. However, upon running the code, the window resized with scrollbars, causing inconvenience for mobile users Below ...

jqueryhtmlcssresizewindow

Tips for capturing the dx dy SVG attribute using CSS

Seeking advice on the most effective way to access the dx dy SVG attribute in CSS. If this is not feasible, what would be the best approach in JavaScript? ...

csssvg

The disappearance of IE7 floats is observed when their parent element is styled with position:relative

The issue I'm encountering in IE7 is related to the CSS properties position:relative;, float: right;, and float: left;. While this problem doesn't seem to occur in newer browsers, it's puzzling why position:relative; impacts the behavior of ...

cssinternet-explorer-7css-floatcss-position

Apply a specific style to the initial element generated by *ngFor

My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...

htmlcssangularngfor