Centering both vertically and horizontally will reveal hidden elements

Question

Centering both vertically and horizontally will reveal hidden elements

Within the following code snippet, there are 6 instances of form-group. All elements are styled using Bootstrap 4 to achieve both vertical and horizontal centering. The center alignment appears to work correctly, but when resizing the browser window vertically, some elements at the top may be hidden by the browser's scrollbar. (To see this behavior in action, run the code snippet).

https://i.sstatic.net/0gPwE.png

Could someone provide guidance on how to resolve this issue?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    ... (remaining HTML code continues)

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

To ensure a minimum height for the row, simply use 100vh.

Visit this link for an example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
    <style>
        .min-100 {
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row min-100 justify-content-center align-items-center">
            <div class="col-lg-5 col-md-8 col-sm-11">
                <form class="form-control" method="post">
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 1
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 2
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 3
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 4
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 5
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 6
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

Answer 2

To ensure a minimum height for the row, simply use 100vh.

Visit this link for an example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">
    <style>
        .min-100 {
            min-height: 100vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row min-100 justify-content-center align-items-center">
            <div class="col-lg-5 col-md-8 col-sm-11">
                <form class="form-control" method="post">
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 1
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 2
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 3
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 4
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 5
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                    <div class="form-group mb-2">
                        <label class="col-form-label col-form-label-sm pt-0 pb-0">
                            Email 6
                        </label>
                        <input type="text" class="form-control form-control-sm" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

Answer 3

Answer №2

To achieve the desired outcome, ensure that you set min-height to .h-100.

.h-100 {
    height: 100%!important;
    min-height: 393px; // Remember to include this
}

If you cannot add CSS directly to h-100, you have the option to create your own class in HTML with h-100 and apply min-height to that custom class as demonstrated below:

<div class="h-100 myForm">

</div>

Your corresponding CSS code would look like this:

.myForm {
  min-height: 393px;
}

You can view a working example on this fiddle here

Answer 4

To achieve the desired outcome, ensure that you set min-height to .h-100.

.h-100 {
    height: 100%!important;
    min-height: 393px; // Remember to include this
}

If you cannot add CSS directly to h-100, you have the option to create your own class in HTML with h-100 and apply min-height to that custom class as demonstrated below:

<div class="h-100 myForm">

</div>

Your corresponding CSS code would look like this:

.myForm {
  min-height: 393px;
}

You can view a working example on this fiddle here

Centering both vertically and horizontally will reveal hidden elements

Answer №1

Answer №2

Similar questions

Javascript issue: opening mail client causes page to lose focus

Creating artwork using a "graphite drawing tool" on a blank canvas

Developing a feature that allows users to switch between different sets of information

ensure that pagination is optimized for mobile viewing in Laravel using Bootstrap

Creating a list of definitions in the form of an HTML table using a multidimensional array in

Vue.js component communication issue causing rendering problems

Is it possible for a website to instruct a user's browser to save the entire page locally?

Layout your Angular components with a column design using Flex Layout

Create and dispatch a JSON POST request to a remote domain without direct server access

Arranging my HTML text fields for optimal organization

Having trouble locating and interacting with the textarea element in Salesforce using Selenium Webdriver

How can I create a dynamic height for a scrollable div?

Is there a way to extract the unicode/hex representation of a symbol from HTML using JavaScript or jQuery?

JavaScript double-click functionality is not operational on IE9 and IE11 browsers

Having trouble debugging a website remotely? Dealing with a JSON problem specifically in IE8

What could be causing these "areas" or "panels" to intersect with each other?

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

Elements in Internet Explorer become unresponsive after being hidden or shown using jQuery

The text/font-weight of the header button is mysteriously shifting without warning

The symbols ">>" have been changed to "ï¿½"