Input label has line through when form switched from display


Topic: Input label has line through when form switched from display none and foucs on input

pregfit asked 3 years ago

Hi,

we have one login form which is displayed at the beginning. After the click on the link "Forgot password?" the login form will become the class d-none and removed from the forgot password form.

Now I click on the input field to start typing ... The label is moved to the top and is line through the border of the input field.

Any idea how to fix this?

Screenshot https://www.dropbox.com/s/bgrgu8c2fjjeid9/Screenshot%202021-10-18%20131530.jpg?dl=0

HTML-Code

<section class="py-5 mb-8">
    <div class="container my-5 py-5 ">
        <div class="row justify-content-center">
            <div class="login-box col-xl-5 col-lg-5 col-md-8 text-center pt-5 pb-3 shadow-4 bg-white rounded">
                <div class="ps-5 pe-5 ms-5 me-5">


                        <form method="post" id="login" class="">
                            <h1 class="mb-5 pb-3 text-muted">Login</h1>

                            <div class="alert-wrapper ">
                                                                </div>

                            <div class="form-outline mt-5 mb-4">
                                <input type="email" id="login-name" name="email" class="form-control" required value="">
                                <label class="form-label" for="login-name">Email address</label>
                            </div>

                            <div class="form-outline mb-4">
                                <input type="password" id="login-password" name="password" class="form-control" required>
                                <label class="form-label" for="login-password">Password</label>
                            </div>

                            <div class="d-flex justify-content-between mb-4">
                                <div class="form-check mb-3 mb-md-0">
                                    <input class="form-check-input" type="checkbox" name="rememberme" value="forever" id="login-remember" />
                                    <label class="form-check-label text-muted" for="login-remember">Remember me</label>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <div class="col-7 d-flex align-items-center">
                                    <a href="#forgot-password" class="text-muted">Forgot password?</a>
                                </div>

                                <input type="hidden" name="action" value="login">
                                <input type="hidden" name="redirect_to" value="">
                                <input type="hidden" id="_wpnonce" name="_wpnonce" value="3022a5948e" /><input type="hidden" name="_wp_http_referer" value="/login/" />
                                <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                            </div>
                        </form>

                        <form method="post" id="forgot-password" class="d-none">
                            <h1 class="mb-5 pb-3 text-muted">Forgot password</h1>

                            <div class="alert-wrapper ">
                                                                </div>

                            <div class="form-outline mt-5 mb-4">
                                <input type="email" id="login-name" name="email" class="form-control" required>
                                <label class="form-label" for="login-name">Email address</label>
                            </div>

                            <div class="d-flex justify-content-between">
                                <div class="col-6 d-flex align-items-center">
                                    <a href="#login" class="text-muted">Back to login</a>
                                </div>

                                <input type="hidden" name="action" value="forgot_password">
                                <input type="hidden" id="_wpnonce" name="_wpnonce" value="3022a5948e" /><input type="hidden" name="_wp_http_referer" value="/login/" />
                                <button type="submit" class="btn btn-primary btn-block">Reset password</button>
                            </div>
                        </form>



                </div>

                <div class="pt-5">
                    <div class="d-flex justify-content-between mt-5 pt-5 text-muted">
                        <div class="col-7 d-flex align-items-center">
                            <a href="/" class="btn btn-link text-muted text-uppercase"><i class="fas fa-chevron-left"></i>Back to website</a>
                        </div>

                        <a href="/datenschutzerklaerung/" class="btn btn-link text-muted text-uppercase">Private privacy</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Marcin Luczak staff commented 3 years ago

Hi,

Your pasted code is for the MDB5 version. In the future, please use the proper technology support section for better help allocation.

Your issue is caused by your input being hidden before its label width is calculated. To recalculate it on show, please follow instructions given in the input documentation https://mdbootstrap.com/docs/standard/forms/input-fields/#section-update

Keep coding, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.20.0
  • Device: Laptop
  • Browser: Chrome / Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes