angular
tabs: md-center-tabs not paginating correctly
CodePen and steps to reproduce the issue:
https://codepen.io/anon/pen/zaoKbb Use the codepen and resize down the windows width (the labels will shrink and when everything is squished the pagination button will appears) the codepen is a copy of the demo one with "md-center-tabs" and less tabs to start with
Detailed Reproduction Steps:
- Use the codepen and resize down the windows width (the labels will shrink and when everything is squished the pagination button will appears)
What is the expected behavior?
The pagination will appear as soon as there is no space to show all the labels correctly (same behavior expected as the md-tabs without the "md-center-tabs")
What is the current behavior?
the labels will shrink and when everything is squished the pagination button will appears
What is the use-case or motivation for changing an existing behavior?
Having the labels centered in a dialog box with the correct behavior
Which versions of AngularJS, Material, OS, and browsers are affected?
- AngularJS: 1.6.7
- AngularJS Material: 1.1.9
- OS: Windows 10
- Browsers: chrome
Is there anything else we should know? Stack Traces, Screenshots, etc.
The fix is to put back margin: 0 auto in md-pagination-wrapper.md-center-tabs
as it was in the previous version
You mention that this was working in a previous version. I tried with 1.1.8 and it seemed to be the same behavior. Which previous version were you using where this worked?
I investigated some more and verified that this is a regression in 1.1.5 caused by PR https://github.com/angular/material/pull/9301.
In 1.1.12 md-center-tabs now works, but pagination doesn't work with md-center-tabs turned on. The tabs shrink with an ellipsis instead. Turning off md-center-tabs makes pagination work when there's not enough space, but the tabs aren't centered.
