Ink bar under centered tabs not being aligned properly when opening sidenav using Angular Material

问题

I want to add some tabs on top of my page, and I want to center them. I am however getting the ink bar under the tabs misaligned when I open the sidenav. Clicking on either tab will reset the ink bar, and reposition it correctly though. How can I make the ink bar be aligned properly?

I am using ViewEncapsulation.None on my component, and I have overriden the css for mat-tab-list like this:

.mat-tab-list{
  display: flex;
  justify-content: center;
}

Maybe there is another (proper) way to center the tabs so that I can avoid this behaviour?

I have made a stackblitz to reproduce the problem, https://stackblitz.com/edit/angular-thrvh6 (problem occurs on desktop sized windows, not on mobile sized windows)

回答1:

It seems that setting the sidenav's mode property to push fixes the problem. However, it changes how the components are displayed, as the content on the right is partially greyed-out when the sidenav is open; whether this is an acceptable behaviour is up to you.

回答2:

I also have ran into this issue. The mat-ink-bar does not recalculate when there is a material side nav with the mode set to "side". Here is my work around with css (I am hiding the mat-ink-bar and using &:after styling):

.mat-tab-label-active {
    .mat-tab-label-content {
      font-weight: bold;
      color: black;

      &:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: $blue-3;
        right: 0;
        bottom: 0;
      }
   }
}

mat-ink-bar {
  display: none !important;
}

来源：https://stackoverflow.com/questions/49485527/ink-bar-under-centered-tabs-not-being-aligned-properly-when-opening-sidenav-usin