[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 ?