CODEWITHSUNDEEP
cssangularangular-material
johnnyjohnson
johnnyjohnson

Reputation: 103

How do you remove the Angular Material mat-ink-bar?

I am having trouble getting the ink bar to be hidden. I have tried a multitude of different things, but with no success. Here is the CSS I currently have, which does change the color of the ink-bar. I wish to disable and hide it completely to remove the border shadow.

/* active tab ink bar */
::ng-deep .mat-ink-bar {
  background-color: var(--primary-color,$orange) !important;
  display: none !important;
  visibility: hidden !important;
  transition: none !important;
  height: 0px !important;
  width: 0px !important;
}

enter image description here

Upvotes: 5

Views: 12067

Answers (5)

Shivendra
Shivendra

Reputation: 1

/* header */
::ng-deep.mat-tab-group .mat-tab-header, .mat-tab-nav-bar .mat-tab-header{
  border-bottom: none;
}

/* ink bar style */
::ng-deep.mat-tab-group .mat-ink-bar, .mat-tab-nav-bar .mat-ink-bar{
 display: none !important;
}

Upvotes: 0

Victor Muresanu
Victor Muresanu

Reputation: 176

Since Angular (Material) 15 mat-ink-bar has been renamed. I was able to remove it with the following snippet in global scss:

.mdc-tab-indicator__content {
  display: none;
}

Upvotes: 7

Vishal Isharani
Vishal Isharani

Reputation: 49

I'm also facing the same issue, I have fixed like this

/* header */
::ng-deep.mat-tab-group .mat-tab-header, .mat-tab-nav-bar .mat-tab-header{
  border-bottom: none;
}

/* ink bar style */
::ng-deep.mat-tab-group .mat-ink-bar, .mat-tab-nav-bar .mat-ink-bar{
 display: none !important;
}

Upvotes: 1

Umesh Naik
Umesh Naik

Reputation: 117

I had the same issue in changing the active tab style i fixed it using the below style.

:host ::ng-deep .mat-tab-label {
    height: 3rem !important;
    min-width: 8rem !important;
}

/* Styles for the active tab label */
:host ::ng-deep .mat-tab-label.mat-tab-label-active {
    border: 1px solid #2F80ED;
    box-sizing: border-box;
    border-radius: 0.8rem;
}

/* Styles for the ink bar */
:host ::ng-deep .mat-ink-bar {
    display: none !important;
}

Upvotes: 7

Yin
Yin

Reputation: 437

Are you sure it's not the mat-tab-nav-bar :

::ng-deep .mat-tab-header, .mat-tab-nav-bar {
    border-bottom: 0;
}

You can check also this.

Upvotes: 4

Related Questions