md-tabs: text turns to dots on small screen on IE11 #10406

jarekskuder · 2017-02-15T09:46:35Z

I need tabs to be streched always and on small screans to, but words are turning in to dots or half of a word turns to dots. I thought maybe words are too big, but then i tried to resize the window and then it turns to normal words.

My code:

<md-tabs class="main-tabs" md-selected="vm.selectedIndex"
             md-center-tabs md-border-bottom md-autoselect md-no-ink
             md-no-pagination="false"
             md-stretch-tabs="auto"
             style="width: auto !important; margin-top: 10px;">
        <md-tab ng-click="openLeftMenu()" id="tab1">
            <md-tab-label>{{translates.top_menu_meniu}}</md-tab-label>
        </md-tab>
        <md-tab ui-sref="map" id="tab2">
            <md-tab-label>{{translates.top_menu_map}}</md-tab-label>
        </md-tab>
        <md-tab ui-sref="list" id="tab3">
            <md-tab-label>{{translates.top_menu_list}}</md-tab-label>
        </md-tab>
    </md-tabs>

The text was updated successfully, but these errors were encountered:

EladBezalel · 2017-03-18T20:41:59Z

Please provide a codepen so we can investigate further.

gbruins · 2017-05-25T21:23:51Z

This also happens in IE11. Open the demo page in IE 11 to see the issue:
https://material.angularjs.org/latest/demo/tabs

gbruins · 2017-06-05T23:26:07Z

May I suggest that the 'needs:demo' and 'P5 - Needs Investigation' labels be removed? This issue is 'demoable' on this page when viewing in IE11: https://material.angularjs.org/latest/demo/tabs

Perhaps the "browser: IE" label can be added as well to give this issue more visibility and urgency.

gbruins · 2017-06-09T00:48:15Z

This bug was introduced in 1.1.2

waegen · 2017-06-21T13:43:48Z

+1 for a fix - We are too running into this issue when number of tabs exceeds the horizontal space

peter-imrich · 2017-08-23T14:29:00Z

+1 for a fix - We are too running into this issue when number of tabs exceeds the horizontal space

LoganDupont · 2017-08-24T05:57:52Z

+1

indexofmetals · 2017-09-19T18:51:24Z

+1

amritk · 2017-12-23T00:02:04Z

+1

motabass · 2018-01-23T12:12:22Z

+1

Splaktar · 2018-02-11T06:53:45Z

Verified that this is not reproducible on Chrome, Firefox, or Safari.

Nickproger · 2018-08-17T09:54:16Z

We've got the same issue :(

Splaktar · 2018-08-30T02:02:11Z

As mentioned by @zakaoai, just setting the md-pagination-wrapper's width is not enough. If you only change that, then the inkbars and paging buttons can get very out of sync and broken.

I tried just adding flex: auto but that didn't help at all. I'm going to explore some other flexbox compatible options. I really don't want to revert back to manual width calculations since that caused issues with tabs and more.

tab-items should have 12px right/left padding instead of 24px - this is to align with the spec and more of the label visible on mobile previous commits removed use of getMinTabWidth but never updated CSS - this applies the proper min-width CSS to match the spec remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

Splaktar · 2018-08-30T03:29:23Z

I have opened PR #11432 to address this via CSS changes to md-tab and md-tab-item.

tab-items should have 12px right/left padding instead of 24px - this is to align with the spec and more of the label visible on mobile previous commits removed use of getMinTabWidth but never updated CSS - this applies the proper min-width CSS to match the spec remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

tab-items should have 12px right/left padding instead of 24px - this is to align with the spec and more of the label visible on mobile remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

previous commits removed use of getMinTabWidth but never updated CSS - this applies the proper min-width CSS to match the spec - which is 72px on xs and 160px on everything else Relates to #10406. Relates to #11432.

remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

…#11432) remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

- tab-items should have `12px` right/left padding instead of `24px` - this is to align with the spec and more of the label visible on mobile - remove unused `calcPagingWidth()` - convert all `translate3d` to `translate` for better IE11 support Fixes #10406. 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 CSS - this applies the proper min-width CSS to match the spec - which is 72px on xs and 160px on everything else Relates to #10406. Relates to #11432.

- 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.

thesunfern · 2020-07-02T18:31:37Z

Try setting the CSS property for it. .md-tabs{ overflow : visible; }

EladBezalel added needs: demo A CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue P5: nice to have These issues will not be fixed without community contributions. labels Mar 18, 2017

Splaktar added severity: regression This issue is related to a regression P2: required Issues that must be fixed. type: bug and removed P4: minor Minor issues. May not be fixed without community contributions. labels Feb 11, 2018

Splaktar added this to the 1.1.8 milestone Feb 11, 2018

Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community needs: Pull Request labels Feb 11, 2018

Splaktar changed the title ~~md-tabs text turn to dots in small screan~~ md-tabs text turn to dots in small screen on IE11 Feb 11, 2018

Splaktar changed the title ~~md-tabs text turn to dots in small screen on IE11~~ md-tabs: text turns to dots on small screen on IE11 Feb 11, 2018

Splaktar added the for: external contributor label Feb 11, 2018

Splaktar modified the milestones: 1.1.8, 1.1.9 Mar 16, 2018

Splaktar mentioned this issue Apr 8, 2018

tabs: Unable to see md-tab-item label fully in IE 11 #11212

Closed

Splaktar modified the milestones: 1.1.10, 1.1.11 Jun 26, 2018

Splaktar mentioned this issue Jul 10, 2018

md-tabs: text turns to dots on small screen on IE11 #11366

Closed

Splaktar self-assigned this Aug 30, 2018

Splaktar mentioned this issue Aug 30, 2018

fix(tabs): remove manual pagination sizing algorithm #10136

Merged

Splaktar added has: Pull Request A PR has been created to address this issue and removed for: external contributor needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Aug 30, 2018

Splaktar mentioned this issue Aug 30, 2018

fix(tabs): min-width not respected on IE11 #11432

Merged

3 tasks

Splaktar mentioned this issue Sep 10, 2018

fix(tabs): update min-width to follow the spec #11438

Merged

3 tasks

Splaktar added a commit that referenced this issue Sep 25, 2018

fix(tabs): tab labels overly truncated on IE11 when pagination active

6ca6c31

remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

Splaktar added a commit that referenced this issue Oct 2, 2018

fix(tabs): tab labels overly truncated on IE11 when pagination active

21a07ad

remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

andrewseguin closed this as completed in #11432 Nov 15, 2018

andrewseguin pushed a commit that referenced this issue Nov 15, 2018

fix(tabs): tab labels overly truncated on IE11 when pagination active (…

2b2f441

…#11432) remove unused calcPagingWidth() convert all translate3d to translate for better IE11 support Fixes #10406

Splaktar added the resolution: fixed label Nov 15, 2018

Splaktar mentioned this issue Jan 3, 2019

tabs: pagination Not Working on IE11 #11574

Closed

Splaktar mentioned this issue Apr 19, 2019

tabs: wrong tab position when a new tab is added #11689

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

md-tabs: text turns to dots on small screen on IE11 #10406

md-tabs: text turns to dots on small screen on IE11 #10406

jarekskuder commented Feb 15, 2017 •

edited

Loading

EladBezalel commented Mar 18, 2017

gbruins commented May 25, 2017

gbruins commented Jun 5, 2017

gbruins commented Jun 9, 2017

waegen commented Jun 21, 2017 •

edited

Loading

peter-imrich commented Aug 23, 2017

LoganDupont commented Aug 24, 2017

indexofmetals commented Sep 19, 2017

amritk commented Dec 23, 2017

motabass commented Jan 23, 2018

Splaktar commented Feb 11, 2018

Nickproger commented Aug 17, 2018

Splaktar commented Aug 30, 2018

Splaktar commented Aug 30, 2018

thesunfern commented Jul 2, 2020

md-tabs: text turns to dots on small screen on IE11 #10406

md-tabs: text turns to dots on small screen on IE11 #10406

Comments

jarekskuder commented Feb 15, 2017 • edited Loading

EladBezalel commented Mar 18, 2017

gbruins commented May 25, 2017

gbruins commented Jun 5, 2017

gbruins commented Jun 9, 2017

waegen commented Jun 21, 2017 • edited Loading

peter-imrich commented Aug 23, 2017

LoganDupont commented Aug 24, 2017

indexofmetals commented Sep 19, 2017

amritk commented Dec 23, 2017

motabass commented Jan 23, 2018

Splaktar commented Feb 11, 2018

Nickproger commented Aug 17, 2018

Splaktar commented Aug 30, 2018

Splaktar commented Aug 30, 2018

thesunfern commented Jul 2, 2020

jarekskuder commented Feb 15, 2017 •

edited

Loading

waegen commented Jun 21, 2017 •

edited

Loading