CODEWITHSUNDEEP
bootstrap-4
stackneverflow
stackneverflow

Reputation: 143

Floating form labels overlapping with form input in bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/compiled.min.css"
    />
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world!</title>
  </head>
  <body style="background-color: #eee; border-radius: 0.5rem 0.5rem 0 0">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-8">
          <section class="p-5 w-auto">
            <div class="row justify-content-center">
              <div class="col-12">
                <div class="card text-black" style="border-radius: 25px">
                  <div class="card-body p-md-5">
                    <div class="row justify-content-center">
                      <div class="col-md-10 order-2">
                        <p class="text-center h1 fw-bold mb-5 mt-4">Welcome</p>

                        <form action="http://localhost:3000/signin" , method="POST">
                          <div class="d-flex flex-row align-items-center mb-4">
                            <i class="fas fa-user fa-lg me-3 fa-fw"></i>
                            <div class="form-outline flex-fill mb-0">
                              <input type="text" id="form3Example1c" class="form-control" />
                              <label class="form-label" for="form3Example1c" style="margin-left: 0px">Username</label>
                              <div class="form-notch">
                                <div class="form-notch-leading" style="width: 9px"></div>
                                <div class="form-notch-middle" style="width: 71.2px"></div>
                                <div class="form-notch-trailing"></div>
                              </div>
                            </div>
                          </div>

                          <div class="d-flex flex-row align-items-center mb-4">
                            <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                            <div class="form-outline flex-fill mb-0">
                              <input type="password" id="form3Example4c" class="form-control" />
                              <label class="form-label" for="form3Example4c" style="margin-left: 0px">Password</label>
                              <div class="form-notch">
                                <div class="form-notch-leading" style="width: 9px"></div>
                                <div class="form-notch-middle" style="width: 64px"></div>
                                <div class="form-notch-trailing"></div>
                              </div>
                            </div>
                          </div>
                          <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                            <button type="submit" class="btn btn-primary btn-lg">Login</button>
                          </div>
                          <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                            <button type="button" class="btn btn-primary btn-lg">Forgot password?</button>
                          </div>
                        </form>
                      </div>
                      <div class="col-md-8 d-flex align-items-center order-1">
                        <img
                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
                          class="img-fluid"
                          alt="Sample image"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </body>
</html>

Here, if I type something in the input fields, and click somewhere else inside the form, the fields go out of focus. I expect that the labels too will stay above as long as the fields have some text content within them, but that is not the case. The label moves in and overlaps with the text content.

How would I fix this behavior? I want the field label to stay up when there is text inside it. If the field is empty, the label should move down in the field when out of focus.

Upvotes: 1

Views: 1440

Answers (1)

stackneverflow
stackneverflow

Reputation: 143

Found my solution. Just had to add this to onfocusout for each field

<script>
      const slickAnim = () => {
        let field = document.querySelector('#form3Example1c');
        console.log(field.value);
        if (field.value.length > 0) {
          field.classList.add('active');
        } else {
          field.classList.remove('active');
        }
      };
</script>

Upvotes: 3

Related Questions