Components: [Tabs] Allow users ability to disable pagination

[cbjerg]

Bug, feature request, or proposal:

Can't find a way to disable scrolling of tabs. Missing (or fail to apply) the md-no-pagination from material1

Which versions of Angular, Material, OS, browsers are affected?

alpha 11 on latest angular

[PTC-JoshuaMatthews]

On the same note, a way to turn on scrolling of tabs would be nice. Seems scrolling doesn't enable unless thhere are over a certain number of tabs, but it would be nice to have the option of enabling it if the tab control is in a small container as well.

[aarmora]

Are you guys having issues with the pagination arrows showing up on page load? I have as basic of an implemenation as is possible and the pagination arrows show up on page load but disappear when I click a tab.

[JordanSliz]

Is there any update on this? This is a pretty frustrating problem for me. I have four tabs of width: 25%, but even though they fit within the container, the pagination activates, and as you say, it doesn't seem like md-no-pagination="true" does anything on the ng2 components.

[aarmora]

@JordanSliz My workaround hack is this:

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

Though I haven't tested it in a situation where we would want pagination tabs.

[JordanSliz]

@aarmora

This doesn't seem to actually affect anything for me. The buttons still shift into overflow, and the arrows still show up until it realizes that the 4 tabs are able to stay within the boundaries, and then disappears them and snaps back to normal. If I click the 4th tab, they all shift into overflow (partially disappear to the left) with the 4th tab centered in the md-tab-header, with the arrows apparent.

Is there a change I can make to the source? Some code I can comment out?

[JordanSliz]

A lot of the problem for styling comes from min-width, in this case, which cases based on breakpoints and such.

minwidth = 0 !important;

and the tabs themselves with:

width: 25%; (or whatever quotient of 100%/number of tabs)

[andrewseguin]

It would be very helpful if you can provide a plunker that demonstrates the issue so we can work through what the right solution would be. Here's an example you can start with: https://plnkr.co/edit/BBMBXOspUAChJzoaJJZw?p=preview

[bdonald25]

@aarmora I had the same issue as you with the arrows showing up on page load. For me I tracked it down to this line in my scss. Once I removed it, I no longer had that issue. Are you using roboto font as well?
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

[JordanSliz]

Well, I am using Roboto, which is standard Material guidelines, and also just a damned solid font. But for me, the problem came down to minimum width. I searched and searched for the problem, but because browsers don't group "min-width" into "width" when displaying calculated values, but does reflect the min-width, I had thought it must be something within ng2 using JS to resize the fields.

[JordanSliz]

That being said, the ng1 pagination commands do nothing in ng2, as yet.

[andrewseguin]

Regarding the primary issue, can you help me understand the use case of disabling pagination? Why restrict the user from scrolling across the tabs?

A plunker demonstrating the issue would be very valuable

[agatsoh]

Any update when this no-scrolling tabs feature will be included ?

[JordanSliz]

As I see it, it's useful for making tighter UI elements, when the space is meant to be solid. The way that the tabs become partially visible is fine if you're designing a Material-standard page, but for those of us using it as a platform to build on, having that bit of customization is useful if you're willing to take responsibility for responsive changes onto yourself.

[lax20attack]

I am having the same issue as @aarmora. After spending a couple hours trying, I could not reproduce it easily in plunker.

I am using md-tab-group in a md-grid-tile in an md-grid-list, which uses absolute position and flex.

Potentially related -https://github.com/angular/material/issues/5439

[tarasbobak]

Here is a plnk showing a related issue. Mat tab labels width is set to 50%. There are two tabs. And when you click between them or click several times on second tab. pagination becomes visible.
http://plnkr.co/edit/sFKPyuakCFenhbvsfl3s?p=preview

Reproducible on Edge, IE10, 11.

[NejcCarl]

I had a similar problem to the one described by others. I had two mat-tabs with 50% each, so the navigation should not appear. Indeed, it did not appear when coming from one route, but it did appear when coming from another. Upon clicking on the tab, the navigation disappeared (as it should).

The issue (I think) was change detection on mat-tabs. I logged the width of component and navigation appeared when towards the end of loading the component stretches for ~30px. For me, the issue was gone after putting this into ngOnInit:
setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 20);

[switch120]

@NejcCarl - clever workaround; but I dare say to the Material team that it's certainly hacky and for my use-case it causes an unacceptable screen flash of those pagination arrows. I have tabs that are dynamically added based on a (locale) selection, and when changing from several tabs to a single (or just fewer), the arrows appear. I needed at least a 150ms timeout on your solution to make this work so unfortunately it's not deliverable in that state. Would be great to have the ability to just disable the pagination altogether instead of an event timeout or CSS hack.

FWIW, here's how I got rid of them:

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

[karthickDhanapal]

@NejcCarl I am having the same problem but why mat tabs are not change detected , when i open my developer tools the pagination automatically disappear and working fine as expected is there any solution for it

[Harmonickey]

@karthickDhanapal When you opened your developer tools, that initiates a resize event, which itself is fixing the problem temporarily. Kind of like how @NejcCarl is hitting the resize trigger every 20 ticks.

[r0b3r70]

@NejcCarl - clever workaround; but I dare say to the Material team that it's certainly hacky and for my use-case it causes an unacceptable screen flash of those pagination arrows. I have tabs that are dynamically added based on a (locale) selection, and when changing from several tabs to a single (or just fewer), the arrows appear. I needed at least a 150ms timeout on your solution to make this work so unfortunately it's not deliverable in that state. Would be great to have the ability to just disable the pagination altogether instead of an event timeout or CSS hack.

FWIW, here's how I got rid of them:

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

::ng-deep will be depricated

[austinwk]

I also had this issue. In my case I had 4 tabs, each consuming 25% of the width of the parent. Adding min-width: 0; to .mat-tab-link fixed it for me.

I then had another issue with the pagination controls appearing _after_ a tab was clicked. Adding padding: 0; fixed that.

If you are having an issue with the tab text sliding to the left when clicked, add [disableRipple]='true' to your mat-tab-link in the template.

To answer another question from this thread, I am using Roboto.

.mat-tab-link {
  min-width: 0;
  padding: 0;
  width: 25%;
}

Using Angular 8 with the following template structure:

<nav mat-tab-nav-bar>
    <a mat-tab-link
      [routerLink]='[ "step-1" ]'
      routerLinkActive='active-link'
      [disableRipple]='true'>
      Step 1
    </a>
    <!-- Plus 3 more tabs -->
</nav>

[ArDotWeb]

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>

after removing the two buttons with the following code :

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

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

when we select item-10 we can not scroll left!
where is my problem?

DEMO (For testing first scroll right and then select item-10)

[fiscusmatt]

Try unsetting the following CSS:

.mat-tab-list {
transform: unset !important;
}

To scroll as the user selects a mat-tab-label a transform is applied to scroll the header:

transform: translateX(-75px);

[ArDotWeb]

Try unsetting the following CSS:

.mat-tab-list {
transform: unset !important;
}

To scroll as the user selects a mat-tab-label a transform is applied to scroll the header:

transform: translateX(-75px);

I did. scroll works, but how to scroll to go to the active item
DEMO

[dksdheeraj]

Hi ArDotWeb,

Having the same issue. Did anybody find the solution?

[jelbourn]

This was done in #17409

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}