CODEWITHSUNDEEP
htmlcssangularbootstrap-4angular-material
Casey Harrils
Casey Harrils

Reputation: 2963

Unwanted White Space at the bottom of Web Angular / Material / Bootstrap Page

I am using Angular Bootstrap for development purposes.

I am getting white space at the bottom of a page when displayed in the browser - and - I am not seeing the reason why.

The Base code being used is below. I made changes that are shown on the Actual Page below (it shows the White Space).

<div class="container-fluid">
  <div class="row" style="background-color: burlywood;">
    <div class="col-md-9">
      Left Box
    </div>
    <div class="col-md-3">
      Right Box
    </div>
  </div>
</div>

I have added the files I am using below.

What am I doing wrong?

Versions being used

Angular CLI: 8.3.23
Node: 12.14.1
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               7.3.8
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.0.1
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.26
@angular/material                  8.0.1
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.39.2

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Trading</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<router-outlet></router-outlet>

Actual page: enter image description here File: login.component.html

<div class="container-fluid">
  <div class="row" style="background-color: burlywood;">
    <div class="col-md-9">
      Image goes here
    </div>
    <div class="col-md-3">
      <!-- Material form login -->
      <div class="card">

        <h5 class="card-header info-color white-text text-center py-4">
          <strong>Sign in</strong>
        </h5>

        <!--Card content-->
        <div class="card-body px-lg-5 pt-0">

          <!-- Form -->
          <form class="text-center" style="color: #757575;" action="#!">

            <!-- Email -->
            <div class="md-form">
              <input type="email" id="materialLoginFormEmail" class="form-control">
              <label for="materialLoginFormEmail">E-mail</label>
            </div>

            <!-- Password -->
            <div class="md-form">
              <input type="password" id="materialLoginFormPassword" class="form-control">
              <label for="materialLoginFormPassword">Password</label>
            </div>

            <div class="d-flex justify-content-around">
              <div>
                <!-- Remember me -->
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="materialLoginFormRemember">
                  <label class="form-check-label" for="materialLoginFormRemember">Remember me</label>
                </div>
              </div>
              <div>
                <!-- Forgot password -->
                <a href="">Forgot password?</a>
              </div>
            </div>

            <!-- Sign in button -->
            <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign
              in</button>

            <!-- Register -->
            <p>Not a member?
              <a href="">Register</a>
            </p>

            <!-- Social login -->
            <p>or sign in with:</p>
            <a type="button" class="btn-floating btn-fb btn-sm">
              <i class="fab fa-facebook-f"></i>
            </a>
            <a type="button" class="btn-floating btn-tw btn-sm">
              <i class="fab fa-twitter"></i>
            </a>
            <a type="button" class="btn-floating btn-li btn-sm">
              <i class="fab fa-linkedin-in"></i>
            </a>
            <a type="button" class="btn-floating btn-git btn-sm">
              <i class="fab fa-github"></i>
            </a>

          </form>
          <!-- Form -->

        </div>

      </div>
      <!-- Material form login -->
    </div>
  </div>
</div>

Upvotes: 1

Views: 2153

Answers (1)

Thulz
Thulz

Reputation: 36

Use min-height: 100vh. That will make the element expands to a minimum of 100% of the user screen view height

Upvotes: 2

Related Questions