CODEWITHSUNDEEP
cssangularuser-interfaceangular-materialangular15
Rohith Poyyeri
Rohith Poyyeri

Reputation: 133

Angular material focus border

I recently updated from Angular 13 to Angular 15, such a nightmare with all the designs broken and I am still pulling my hair.

Most of the issues were with Angular Material upgrade to 15.

Here is a list of all my angular dependencies.

    "@angular/animations": "15.2.1",
    "@angular/cdk": "15.2.1",
    "@angular/common": "15.2.1",
    "@angular/compiler": "15.2.1",
    "@angular/core": "15.2.1",
    "@angular/flex-layout": "13.0.0-beta.38",
    "@angular/forms": "15.2.1",
    "@angular/material": "15.2.1",
    "@angular/material-moment-adapter": "15.2.1",
    "@angular/platform-browser": "15.2.1",
    "@angular/platform-browser-dynamic": "15.2.1",
    "@angular/platform-server": "15.2.1",
    "@angular/router": "15.2.1",

mat-menu-item has focus border and can't override the back font menu

input matInput has this weird grey background

text box

matTooltip is flickering on hover (couldn't capture a video) enter image description here

This tooltip issue is only happening in few places though.

Any help is appreciated. I am guessing that there should be something that I can set in global.scss that can remove all the focus border.

Upvotes: 0

Views: 1248

Answers (2)

Mohsen_AB
Mohsen_AB

Reputation: 39

add class styles.scss or styles.css

.mat-mdc-focus-indicator::before {
  display: none !important;
}

Upvotes: 0

Rohith Poyyeri
Rohith Poyyeri

Reputation: 133

For the issue 1:

The blue overlay was because of the following in my code.

@include mat.strong-focus-indicators()

For the mat-menu-item font, I updated the following in the component,ts.

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss'],
  encapsulation: ViewEncapsulation.None // this bit was missing
})

In the scss file, I added the following.

.mdc-list-item__primary-text {
  color: $primary--color;
}

Upvotes: 0

Related Questions