Google Form Autocomplete Strange Behavior

Question

I hope that this question makes sense. I am developing a website which uses Identity Server 4 for authentication (probably not relevant, but it can't hurt). I have done a lot of testing on the sign in page and naturally Google (specifically Chrome, I assume) provides suggestions for previous entries. I am not very familiar with front end design and have no idea where to start in fixing this issue. I don't mind that there is autocomplete, but as you can see in the attached image, it interacts with the UI very strangely.

I am using Bootstrap 4 btw. Here is the cshtml for the card pictured:

<div class="card-body">
    <form class="rounded-lg" asp-route="Login">
        <input type="hidden" asp-for="ReturnUrl" />
        <div class="form-group">
            <input class="form-control custom-input rounded-lg" placeholder="Email or Username" asp-for="Username" required>
        </div>
        <div class="form-group password">
            <input id="password-field" type="password" class="form-control rounded-lg" placeholder="Password" asp-for="Password" required autocomplete="off">
            <span id="pass-status" class="fa fa-eye" aria-hidden="true"></span>
        </div>
        @if (Model.AllowRememberLogin)
        {
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input rounded-sm" asp-for="RememberLogin">
                    <label class="form-check-label" asp-for="RememberLogin">Remember Me</label>
                </div>
            </div>
        }
        <p>Default Username: Admin Password: P@ssword1</p>
        <button class="btn btn-lg btn-primary btn-block text-uppercase rounded-pill" name="button" value="login">Sign In</button>
        <div class="custom-link">
            <a href="@Url.Action("Register", "Account", new { returnUrl = Model.ReturnUrl })" class="card-link">Or Register a New Account</a>
        </div>
    </form>
</div>

And here is the css:

@import '../lib/bootstrap/dist/css/bootstrap.min.css';

.custom-input {
    height: auto;
}

.custom-link {
    padding-top: 15px;
}

.custom-body-container {
    margin-top: 10%;
}

.password {
    position: relative;
    margin-bottom: 10px;
}

.password .fa-eye {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 15px;
}

.password .fa-eye-slash {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 15px;
}

score 0 · Answer 1 · answered Jul 29 '20 at 12:48

0

As you just mentioned Chrome the solution would be adding the autocomplete property with the value.

autocomplete="chrome-off"

Disabling Chrome Autofill

The behaviour is very different for each browser so you may have to add some conditions if you would like full compatibility.

Firefox use autocomplete="off" instead How do you disable browser Autocomplete on web form field / input tag?

answered Jul 29 '20 at 12:48

Carlos Martins

2,809
4
31
48

I use autocomplete="off" for the password, but I would like to leave autocomplete enabled if possible. I just can't figure out how to fix the weird look. Out of curiosity, were you able to replicate my issue? It could just be an issue with my machine or install of chrome – arc-menace Jul 29 '20 at 14:51

Google Form Autocomplete Strange Behavior

1 Answers1