md-tabs last tab sometimes not visible

Depending upon the Tab Title, md-tabs will not always render the last tab in the Array when used with ng-repeat.
When it gets in this state it also is unable to scroll left, right when the tab window becomes small

See codepen here:
http://codepen.io/scottreisdorf/pen/EPjXzN

A Fix using the v1.0.0-rc7 code

Using v1.0.0-rc7 I was able to fix this by changing the updatePagingWidth method to add 1 more px.
See code below adding 1 more px at the end:

 width +=1;

Full Method:

      function updatePagingWidth() {
        var width = 1;
        angular.forEach(getElements().dummies, function (element) {
          width += Math.ceil(element.offsetWidth);
        });
        width +=1;
        angular.element(elements.paging).css('width', width + 'px');
      }

fix(autocomplete): fixes the sizing math

Hello,
Look like the problem is still here. I use dialog with tab. Every time I call the dialog, the last tab is not displayed.
I find two quickfix:
Add a dummy tab
Or fire this on the modalController to add 1px (ugly).

    setTimeout(() => {
      var el = document.querySelector('md-pagination-wrapper');
      var currW = el.style.width;
      el.style.width = parseInt(currW, 10) + 1 + 'px';
    }, 200);

I reproduce the issue on this codepen. I'm using the last version of chrome on linux.

I started having this problem after upgrading to v1.1.0 and two solutions worked for me:

Explicitly set a tab width, so that the wrapper doesn't render too small. Just add your myTabs class to the <md-tabs> element and then the following CSS:

.myTabs .md-tab {
  width: 150px;
}

Set the tabs to always stretch with md-stretch-tabs="always" although this obviously isn't an ideal solution for everyone. Also I have found that setting stretch to always does not paginate properly on mobile...

@robertmesserle

Also not sure how I just unassigned @robertmesserle ...

Seems to happen at random after upgrade to 1.1.0
So far only in firefox. Never in chrome.

AM 1.1.0
Dialog + dynamic tabs
Issue: cannot see and/or scroll to the last tab.
Because: The label is not a static text.

Just add   as a workaround.

<md-tab ng-repeat="item in list">
<md-tab-label>&nbsp;{{item.timestamp | date:shortDate}}</md-tab-label>

I have the same problem using latest 1.1.1. I am using tabs in custom dialogs, and the last tab is never displayed. The workaround using md-stretch-tabs="always" works for me but it is not ideal.

Or you can add <md-tab ng-hide="true"></md-tab>

I'm seeing this problem in Chrome and Firefox but not IE 11 and Edge. My scenario uses just 2 static tabs and both the extra hidden tab and setting md-stretch-tabs="always" work but are ugly fixes.

<md-dialog id="forcastUpdateDialog" aria-label="Update Forcast">
        <md-toolbar>
            <div class="md-toolbar-tools">
                <div class="md-toolbar-title">
                    <h2>Updating Forcast</h2>
                </div>
                <span flex></span>
                <div class="toolbar-icons">
                    <md-button class="md-icon-button" ng-disabled="notModified()" ng-click="save()">
                        <md-icon aria-label="Save forcast">save</md-icon>
                    </md-button>
                    <md-button class="md-icon-button" ng-click="close()">
                        <md-icon aria-label="Close dialog">close</md-icon>
                    </md-button>
                </div>
            </div>
        </md-toolbar>        
        <md-dialog-content>
            <md-tabs md-boarder-bottom>
                <md-tab label="Current">
                    <md-content class="md-padding">
                        <form>
                            1
                        </form>
                    </md-content>
                </md-tab>
                <md-tab label="History">
                    <md-content class="md-padding">
                        2
                    </md-content>
                </md-tab>
            </md-tabs>
        </md-dialog-content>
</md-dialog>

Please fix

For anyone who isn't shy about using full jQuery here's a drop in patch

(function () {
    'use strict';

    // Patch for md-tab bug https://github.com/angular/material/issues/6212
    var initialWidth = {};
    $('body').on('DOMNodeInserted', 'md-pagination-wrapper', function (e) {
        var that = this;

        setTimeout(function() {
            // Don't increment the width if there's no width set
            if (that.style.width === "" || that.style.width == "0px")
                return;

            var currW = parseInt(that.style.width);

            // Don't process a element more than once (the $$hashkey value is added by Angular after all the DOM is created)
            if (initialWidth[that.$$hashkey] < currW)
                return;

            that.style.width = currW + 1 + 'px';

            initialWidth[that.$$hashkey] = currW;
        }, 200);
    });

})();

Removing the width:1px from this class works for me. This gets applied to the hidden tabs which the directive uses to calculate the width of the md-pagination-wrapper, which does not allow custom content width to be taken into consideration.

._md-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
text-transform: none;
/width: 1px;/
}

@smithscripts

@smithscripts you save my life after 2 hours of debugging

Navigation Menu

Repository navigation

md-tabs last tab sometimes not visible #6212

A Fix using the v1.0.0-rc7 code

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

md-tabs last tab sometimes not visible #6212

Description

A Fix using the v1.0.0-rc7 code

Activity

mrdotb commented on Aug 3, 2016

JackForbes commented on Aug 22, 2016

JackForbes commented on Aug 22, 2016

ErisedMedia commented on Aug 22, 2016

hexadecy commented on Aug 26, 2016

jaczynski commented on Sep 9, 2016

hexadecy commented on Sep 10, 2016

rupe120 commented on Jan 5, 2017

rupe120 commented on Jan 5, 2017

smithscripts commented on Apr 19, 2017

LabN36 commented on May 22, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions