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

[jarekskuder]

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>

[EladBezalel]

Please provide a codepen so we can investigate further.

[gbruins]

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

[gbruins]

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]

This bug was introduced in 1.1.2

[waegen]

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

[peter-imrich]

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

[LoganDupont]

+1

[hurricane987]

+1

[amritk]

+1

[motabass]

+1

[Splaktar]

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

[SanjanKalsi]

Found the Reason !!!

As per @gbruins comment that this issue happened from 1.1.2, I saw the CSS applied to 1.1.1 (no issue in this version in the dynamic tabs demo) on <md-pagination-wrapper> and compared it to v1.1.8 and found that:
width: 999999px is missing in the current version CSS.
Adding this to <md-pagination-wrapper> makes it working in IE.

Hope this helps.

[Splaktar]

That's interesting. Do any more sane values for width work as well? What is the width without setting it to 999999px?

[SanjanKalsi]

It seems that all values of width will work until the labels can be accommodated within that width.

The min-width for a tab is computed to be 24px.
<md-pagination-wrapper> has its width (in IE) to be inherited from its parent <md-tabs-canvas> minus the left/light control button width.
If all tabs can be accommodated in that width, it won't even show the left/light control buttons or they will be disabled, unless the tabs with their min-width combined exceed the wrapper's width.

I think that the general idea till v1.1.1 (for IE fix only) was that we can allow closest and safest maximum static width compatible with all browsers (maximim pixel value) to the <md-pagination-wrapper> which can accommodate maximum number of tabs as possible.

My hunch is that in the subsequent versions this static CSS was removed from the angular-material.css during a review process since static styling is not desirable.

[NOTE: The CSS width: 999999px has been present from v0.9.0 (lowest possible in angular material official site) till v1.1.1]

[SanjanKalsi]

@Splaktar, found the commit from where the width: 999999px; was removed. (from 1.1.2 change log):

Commit: 5b799e2
File: src/components/tabs/tabs.scss

Comparison Screenshot:

[Splaktar]

It looks like that commit references the move to flexbox for sizing of tabs. I wonder if it is possible to use flexbox to properly size the md-pagination-wrapper on IE.

[zakaoai]

Hello I have the same Issue with my md-tabs in IE. The temporary Fix ( width : 999999px ) work well for the display.
There is still a problem with the usage of the Arrows (Next Page and Previous Page) and the click on the tab header.

Try on IE : https://codepen.io/anon/pen/qYaZYW

How to reproduce :

• Click two times on the last tab header you can see
• Click on the right Arrow

[Nickproger]

We've got the same issue :(

[Splaktar]

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.

[Splaktar]

I have opened PR https://github.com/angular/material/pull/11432 to address this via CSS changes to md-tab and md-tab-item.

[thesunfern]

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