1

I use the Material Tab example. I select in all the three tabs the last tab. When I resize the width of the panel the selected tab scrolls out of view. enter image description here

As seen in the picture the third is NOT visible. Is there a way to scroll the third automatically into the view? (e.g. with an action of a button)

Use case: I have a layout which changes the width of a component with an users click and than the selected tab is on the far left side - contrary to the sample here where it is on the right side. In my use case the user hardly knows that there is a tab pane - unless (s)he knows the meaning of the arrows.

==> So I want to scroll the tabs into view. How to do it?

LeO
  • 4,238
  • 4
  • 48
  • 88

1 Answers1

-1

I would say most users would understand the meaning of the arrows.

If you really want to do something about it:

Option 1

The first thing comes to mind is using the native scrollIntoView method on the tab you want to show.

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span id="header"> Third </span>
    </ng-template>
    Content 3
  </mat-tab>
</mat-tab-group>

Then in your component:

(document as any).getElementById('header').scrollIntoView({behavior: "smooth", inline: "end"});

Option 2

You can also trigger click on either left or right arrow until tab is visible.

// Click left arrow
document.querySelector('.mat-tab-header-pagination-before').click()

// Click right arrow
document.querySelector('.mat-tab-header-pagination-after').click()
umutesen
  • 2,523
  • 1
  • 27
  • 41
  • Thx for the hint with the `scrollIntoView`. I tried it and this approach doesn't work nor the other with the `click` - at least not in my scenario. I have the situation, that they scroll out of view on the left side and display is quite strange. The tab is selected by `[selectedIndex]="tabNo"` - perhaps there is a timing issue. – LeO Mar 08 '22 at 11:03