CODEWITHSUNDEEP
angularangular-material
Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14792

Set horizontal scroll in angular material tabs

If we see the following tabs in the mobile's browser, there are two buttons [pagination controls] (the first one is on the right side and the other is on the left side)

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>

enter image description here

I'm going to remove the two buttons and use scroll instead.

Workaround :

(step-1) Remove the two buttons with the following code :

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}

(step-2) put the following style in style.css:

.mat-tab-label-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
    overflow-x: scroll !important;
}

Problem:

The problem of the above method is when we select item-10 we can not scroll left

StackBlitz Here.

Upvotes: 17

Views: 28934

Answers (4)

Igor Kurkov
Igor Kurkov

Reputation: 5040

I had solved these problems with scrolling by making my own auto-scroll effect on already scrollable mat-tabs - when you click on the partially visible tab - it will be autoscrolled to nearly center position, also left button will be scrolled to right, right partially visible button to left.

Please check this comment for more details: https://stackoverflow.com/a/62031767/9026103

Upvotes: 1

Tom Schreck
Tom Schreck

Reputation: 5287

The reason for not being able to scroll when the last tab is active is because Angular mat-tab control is using a transform to move the last tab into view and forcing it to the right side of container.

enter image description here

A possible solution is to squash the transform by adding this CSS class:

::ng-deep {

   // SOLUITON:
  .mat-tab-list {
    transform: inherit !important;
  }


  // FORCES SCROLLABILIY:
  .mat-tab-label-container {
    overflow-x: scroll !important;
  }

  // HIDES MAT-TAB's NATIVE PAGINATION:
  .mat-tab-header-pagination {
    display: none !important;
  }

}

WARNING: the problem with this solution is it kills the transform effect and could be a poor user experience in so much as the user has to scroll for themselves. Arguably, it's better then not being able to scroll left at all.

Upvotes: 1

Bhavesh Lalwani
Bhavesh Lalwani

Reputation: 325

Instead of applying overflow style to .mat-tab-label-container, we can apply it to .mat-tab-header class.

::ng-deep .mat-tab-header {
  overflow-x: scroll !important;
}

::ng-deep .mat-tab-label-container { 
  overflow: visible !important;
}

Also, If you want to remove the scrollbar which comes below the element where overflow-x: scroll is used, we can do the following: 

::ng-deep .mat-tab-header::-webkit-scrollbar {
  display: none;
}

Solution: The problem of the item-10 that cannot be scrolled left is solved by the above styles. I have forked @AbolfazlR repository and made the above changes. Below is the working example

StackBlitz

Upvotes: 13

ForestG
ForestG

Reputation: 18085

It seems it is a known issue, and is still in open status.

A possible solution is using this scss rule(copied from the discussion of the issue) instead of the workaround you mentioned:

::ng-deep .mat-tab-header-pagination {
    display: none !important;
}

Upvotes: 6

Related Questions