Adding a border to a mat tab group causes the inkbar to not display when decreasing the selected index

42 views Asked by At

I want to have the inkbar inside the border, however what I got so far works only if you increase the tab index. If you go back to a previous tab, the inkbar goes behind the tab. See a gif example here

I added a border to the mat-mdc-tab and set rounding on the mdc-tab-indicator__content. Not sure how to fix this bug.

.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mat-mdc-tab {
  @apply border-2 border-solid border-divider-lighter border-x-0 border-t-0 z-0
}

.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mdc-tab-indicator__content {
  @apply rounded-full z-50
}
0

There are 0 answers