mdDialog with mdTabs tabs are not rendered correctly

[jeroenvheel]

When placing mdTabs in a mdDialog the mdTab is not rendered correctly in the master branch

<md-dialog class="admin-dialog">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Create a new User</h2>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <form name="createUser" id="createUser" role="form">
            <md-tabs md-dynamic-height md-stretch-tabs="always" md-center-tabs>

                <md-tab label="Gebruiker">

                    <md-input-container>
                        <label>Name</label>
                        <input id="name" name="name" type="text" md-maxlength="50" required
                               ng-model="user.Name" />
                    </md-input-container>

                    <md-input-container>
                        <label>Description</label>
                        <input id="description" name="description" type="text" md-maxlength="250"
                               ng-model="user.Description" />
                    </md-input-container>

                    <md-input-container>
                        <label>E-mail</label>
                        <input id="email" name="email" type="email" md-maxlength="255" required
                               ng-model="user.Email" />
                    </md-input-container>

                    <md-input-container>
                        <label>Password</label>
                        <input id="password" name="password" type="password" md-maxlength="255" required
                               ng-model="user.Password" />
                    </md-input-container>

                    <md-input-container>
                        <label>Hoofd Bedrijf</label>
                        <md-select name="maincompany" ng-model="user.MainCompany" required>
                            <md-option ng-repeat="company in companyList" value="{{company.Name}}">{{company.Name}}</md-option>
                        </md-select>
                    </md-input-container>

                </md-tab>
                <md-tab label="Rechten">
                    <md-switch ng-model="user.ManageCompanies" aria-label="ManageCompanies?" ng-disabled="!currentUser.ManageCompanies">
                        Company Beheer
                    </md-switch>
                    <md-switch ng-model="user.ManageProjects" aria-label="ManageProjects?">
                        Projecten Beheer
                    </md-switch>
                    <md-switch ng-model="user.ManageUsers" aria-label="ManageUsers?">
                        Gebruiker Beheer
                    </md-switch>

                </md-tab>

            </md-tabs>
        </form>
    </md-dialog-content>
    <div class="md-actions" layout="row">

        <md-button md-no-ink ng-click="cancel()">
            {{::lang.standart.cancel}}
        </md-button>
        <md-button class="md-warn" md-no-ink ng-click="save()" ng-disabled="!createUser.$valid">
            {{::lang.standart.save}}
        </md-button>

    </div>
</md-dialog>

[osuritz]

We have noticed the same issue since 0.11. From what I can tell, the symptom is that each md-tab-item has an inline style of max-width: 0px

Note that for us it happens everywhere we use md-tabs, it's not limited to inside dialogs.

[FrankMeyer]

For me the issue arrises since bower-material v0.11.2-master-71674b0
In the commit 4a16038, addressing issue #4743, the check for pagination was changed.
original: var canvasWidth = Math.min($element.prop('clientWidth'), ctrl.maxTabWidth);
change: var canvasWidth = $element.prop('clientWidth');
If you change the line back to original your problem will be solved.