Material: tabs: disappears inside a md-dialog

[alarrosa14]

angular-material v0.10.1.
Google Chrome.

In the md-dialogI template I have something like this:

<md-tabs class="chop-tab" md-dynamic-height="true" md-border-bottom="true" md-center-tabs="true">
   <md-tab ng-repeat="difficulty in ['easy', 'medium', 'hard']" id="{{difficulty}}">
      <md-tab-label> {{difficulty}} </md-tab-label>
      <md-tab-body class="md-padding">
      ...
      <md-tab-body>
   </md-tab>
</md-tabs>

and this is how I show it:

$mdDialog.show({
        targetEvent: ev,
        animate: false,
        clickOutsideToClose: true,
        controller: "SomeCtrl",
        resolve: {
          resolve_promise: function(service){
            return service.promise();
          }
        },
        templateUrl: "<url to template with code shown above>",
      });

The thing is that sometimes it works as expected and some other times the entire md-tabs element is not shown. Te strangest thing is that in the Chrome Inspector y toggle off and then back to on the overflow: visible property of md-tabs > md-tabs-content-wrapper element and magically the tabs are shown correctly.

Any ideas?

[ThomasBurleson]

@alarrosa14 - does the problem still exist with the lastest code in master? If so, can you provide a CodePen for easy debugging and validation of fixes?

[alarrosa14]

@ThomasBurleson
In master happens exactly the same.

I can't make a codepen that reproduces what happens. Anyway, I decide to share my try: http://codepen.io/alarrosa14/pen/Qbeegj. As you can see the tabs have a little glitch there when the dialog is opened... (Maybe has something to do with my error ?).

When the bug happens, the md-tabs element is shown properly for an instant. Once the dialog is fully shown, md-tabs disappear leaving a blank space instead. Then, triggering the overflow property as I mentioned makes everything ok again.

I tried it in firefox and it doesn't happen.

Sorry that I can't reproduce it. The thing is that I don't know what is happening.

[bitencode]

This was not happening to us in 0.10.0, but started happening when we moved to 0.10.1. We have a sign-in dialog with 2 tabs, each tab with a small form. First tab consists of username, password, locale select input & sign-in button.
I was not able to reproduce the problem others were seeing until we realized it had something to do with Chrome and saved passwords. If I have no saved passwords the dialog opens just fine. If I have a password saved for the site then I can see the sign-in form very briefly and it disappears. If I resize the browser enough (very small -> very large) then part of the form comes back and I can see Chrome has tried to autofill the username and password.
If we set the overflow to visible it works, but looks ugly because we get scroll bars.

[jvmccarthy]

I'm also seeing this, and I agree with @bitencode that it appears to be connected with form autocomplete. When I see this issue, the md-tabs-wrapper and md-tabs-content-wrapper elements are shifted to the left outside the md-tabs container. It's almost like these elements are being positioned as an inactive tab. I'm having a hard time figuring out why they're being positioned outside the md-tabs container.

I'll see if I can get this to reproduce on @alarrosa14's CodePen with form autocomplete.

[robertmesserle]

@alarrosa14 @bitencode @jvmccarthy Is this still occurring with the latest code from master?

[jvmccarthy]

@robertmesserle We refactored the dialog that was giving us problems with autocomplete to not use tabs. I also played around with trying to reproduce this in a CodePen. I could get the browser to use autocomplete on the form but couldn't repro the issue. If I see it again, I'll try it with the latest. Thanks.

[robertmesserle]

Closing for now, but will reopen if it is still an issue.

[llanzo]

For what it's worth, if the dialog is opened with a width that is larger than the pagination cutoff (the width of the dialog > than the combined width of all the tab labels) the md-tab-item elements have a style attribute max-width = 0px; I think this is probably because the shouldPaginate() function of the MdTabsController will never return true in this situation. This doesn't seem to be problem in version 0.10.1, but it is a problem in 11.2 I've created in a code pen here:
http://codepen.io/anon/pen/bVRQJq

[robertmesserle]

@llanzo This is resolved if you change the version to HEAD.

[exchsac]

@robertmesserle

Unfortunately, with latest HEAD

<md-dialog>
  <md-dialog-content layout-padding>
    <md-tabs>
      <md-tab label="One">
      </md-tab>
      <md-tab label="Two">
      </md-tab>
    </md-tabs>
  </md-dialog-content>
</md-dialog>

shows only the first tab. I don't see the second tab at all in the DOM.

EDIT: Actually only the last tab seems to get lost, so I can live with that ;)

[stephengardner]

I'm having this issue, the last tab is cut off. If I wait to display the content after the dialog opens, then the tabs are ok. Waiting to display the content is awful. Needs a fix...

[devversion]

@stephengardner Can you submit a new issue with a codepen pointing to master?

[stephengardner]

Don't just use ng-cloak on the dialog content, while that will work, it will stunt the dialog animation.

The problem is that the width on the md-pagination-wrapper is not being properly calculated during the dialog rendering. For me it was a few pixels too short and the tab was being rendered beneath it (and hence, invisible).
I only have two tabs. For now I added the following to my dialog CSS:

md-pagination-wrapper {
        width: auto!important; // bug where the tabs arent rendered properly.
    }

That will work

[marcincichocki]

@stephengardner Same issue

angular-material 1.1.0
Chrome 52.0.2743.116

[UiCandy]

+1 angular-material 1.1.0-master-0cd2a59

[djleonskennedy]

Hello angular-material 1.1.0 had issue with disappearing md-tabs, ng-cloak on dialog content has solved my issue, Migth be it help someone

[JalalSordo]

angular-material 1.1.0
same issue.
the ng-cloak trick seems to solve the isse, but it makes a small fake dialog appear before the original one is shown.

[reppners]

Appeared lately in our codebase since switching from 1.0.9 to 1.1.0 and only in some dialogs that have tabs inside them but others also using tabs work. Trying to figure out the root cause still..

@stephengardner 's solution did work for me

[disarticulate]

Had the same problem. Not sure why this is a closed issue. @stephengardner 's solution did work for me.
using electron with angular-matterial.css v1.1.1

[thekia19]

Hi, everyone.
I'm using angular-material v1.1.0 in browser Chrome1.1.0 53.0.2785.116 (64-bit).
It is impossible for me to provide codepen by I noticed something and hope It will be useful.

I have 2 tabs and the second one is invisible untill I do resize of the browser window.

The problem for me in the getBoundingClientRect() function that being used in calcTabsWidth()
`function calcTabsWidth(tabs) {

var width = 0;
angular.forEach(tabs, function (tab) {
  width += Math.max(tab.offsetWidth, tab.getBoundingClientRect().width);
});
return Math.ceil(width);

}`

It was impossible to debug with console (it resizing screen) so I put some console.logs into this code.

` function calcTabsWidth(tabs) {

var width = 0;
angular.forEach(tabs, function (tab) {
    console.log('OffsetWidth: ' + tab.offsetWidth);
    console.log('BoundingClientRectWidth: ' + tab.getBoundingClientRect().width);
  width += Math.max(tab.offsetWidth, tab.getBoundingClientRect().width);
});
console.log('Result:' + Math.ceil(width));
return Math.ceil(width);

}`

First time opening md-dialog (before resizing) I'm getting the following
angular-material.js:31732 OffsetWidth: 241
angular-material.js:31733 BoundingClientRectWidth: 129.95858764648438
angular-material.js:31732 OffsetWidth: 168
angular-material.js:31733 BoundingClientRectWidth: 90.07475280761719
angular-material.js:31736 Result:409

And, when I do resize (to small screen and then back to the previous size of screen). I'm getting following
angular-material.js:31732 OffsetWidth: 241
angular-material.js:31733 BoundingClientRectWidth: 241.6666717529297
angular-material.js:31732 OffsetWidth: 168
angular-material.js:31733 BoundingClientRectWidth: 167.5
angular-material.js:31736 Result:410

As you can see result differs in only one pixel, but for the displaying tabs it is crucial.
Before resizing

After resiaing

I understand It won't help much, but hope it will bring some thoughts to solve this.

Thanks a lot for angular-material!

[shotokai]

not a solution, but as a workaround I put an empty at the end of the stack and it fixed the issue for me.

[santhosh82]

I am experiencing the problem the same way @thekia19 has described. I would be glad if someone helps to solve this issue. Thanks in advance.

[ghost]

Problem is still there. Since only last tab is missing, one empty tab at the end hides the problem

[Splaktar]

If you are still seeing this, please open a new issue with a CodePen repro using AngularJS Material 1.1.18+.