CODEWITHSUNDEEP
htmlcssangularhyperlink
Ree
Ree

Reputation: 903

Link does not use default CSS

I have a link ("Go back") towards the bottom of this html.

<div style="margin-top: 5em; display: flex; justify-content: center; height: 100vh; align-items: center;">

    <div class="shadow-lg p-0 mb-5 bg-white rounded" style="padding: 3em;">
        
        <div class="card-body">
            <h6 style="margin-top: 0.3em; font-size: medium;">Reset password</h6>
            <form [formGroup]="passwordResetForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="text" formControlName="email" class="form-control"
                        [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                        <div *ngIf="f.email.errors.required">Email address is required</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between" style="padding-top: 1em;">
                    <div class="form-group">
                        <button [disabled]="loading" class="btn btn-primary">
                            <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
                            Reset password
                        </button>
                    </div>
                    <a class="p-2" routerLink="../login">Go back</a>
                </div>

               
                <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
            </form>

        </div>
    </div>
</div>

The link WORKS. But I simply cannot get it to look like a link. i.e. no underline, no hand cursor.

There is absolutely no CSS anywhere in my project for links. I only use out-of-the-box standard links (black text, black underline, hand icon on hover).

I tried adding some CSS to this link (a:hover) but it ignored me.

I have other html files in this dir with the same links that look as expected. Only this one file refuses.

I have absolutely no logic in my component.ts. Only the class declaration and decorator things.

what it looks like

what other files look like

Upvotes: 2

Views: 128

Answers (1)

Sai Hemanth Talasila
Sai Hemanth Talasila

Reputation: 366

By seeing the code you posted I think the route is mentioned incorrect it wont have dots preceding the route as base DIR is already set something like below...

<!--Incorrect -->
<a class="p-2" routerLink="../login">Go back</a>

<!--Correct -->
<a class="p-2" routerLink="/login">Go back</a>

Coming to the CSS try adding important to the style you are trying to add as below.

a:hover {
 text-decoration: underline !important;
  color: #3B5998 !important;
}
a{
  cursor: pointer !important;
}

And also check the RouterModule import in the app.module.ts file.
Ref Link

Upvotes: 1

Related Questions