-
Notifications
You must be signed in to change notification settings - Fork 3.4k
fix(tabs): min-width not respected on IE11 #11432
Conversation
@jelbourn please review and let me know if you think that increasing the This change aligns with the spec and with Angular Material (other than it using |
The |
7807da7
to
1a4eede
Compare
Removed fix for Updated OP screenshots to reflect these changes. |
This latest iteration "causes a slight layout change, which seems pretty minimal, but is screenshot test breaking." It looks like it will need approval from about 5 apps to get in. After about 5 iterations now, I think this is the least disruptive we can get on this regression fix. Considering it breaks IE11 completely, I think that we need to get this in. |
- previous commits removed use of `getMinTabWidth` but never updated the related CSS - this applies the proper `min-width` CSS to match the spec - which is `72px` on `xs` and `160px` on everything else - this also changes the left and right padding from `24px` to `12px` to align with the spec Relates to #10406. Relates to #11432. BREAKING CHANGE: Tab items now have a `min-width` and `padding` which matches the Material Design specification. For width, this is `72px` on `xs` screens and `160px` on all other screens. For left and right `padding`, this is now `12px` instead of `24px`. If your app needs to have tabs which are smaller than the spec, you will need to override `md-tab-item`'s `min-width` and `md-tab`'s `padding` styles.
- previous commits removed use of `getMinTabWidth` but never updated the related CSS - this applies the proper `min-width` CSS to match the spec - which is `72px` on `xs` and `160px` on everything else - this also changes the left and right padding from `24px` to `12px` to align with the spec Relates to #10406. Relates to #11432. BREAKING CHANGE: Tab items now have a `min-width` and `padding` which matches the Material Design specification. For width, this is `72px` on `xs` screens and `160px` on all other screens. For left and right `padding`, this is now `12px` instead of `24px`. If your app needs to have tabs which are smaller than the spec, you will need to override `md-tab-item`'s `min-width` and `md-tab`'s `padding` styles.
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
24px
which is12px
more on each side than specified by the MD spec.0px
and the only width being the48px
of padding.translate3d
which causes performance issues and bugs on IE11. We don't actually translate anything in thez
dimension.Issue Number:
Fixes #10406
What is the new behavior?
Does this PR introduce a breaking change?
Other information
The breaking changes to make
min-width
align with the MD spec have been pulled out of this PR and put into PR #11438 for 1.2.0.Please note that this is fixing a regression from a breaking change that was in 1.1.2.
Before (IE on bottom, Chrome on top):
After in IE
After in Chrome
And here is IE11 rendering with a small width (sub
600px
)