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 ;)