0
現在、開発中の角度ベースのアプリです。角材：md-stretch-tabsのエラー
問題：md-tabs要素にmd-stretch-tabsを追加しましたが、タブ＃2に切り替えると、タブが収縮して、flexに十分なスペースがないように収縮します。 依存関係やコード自体の問題ですか？
EDIT：完全なコードを追加しました。
var app = angular.module('BetaApp', ['ngMaterial']);
app.controller('SideNavController', function($scope, $mdSidenav) {
\t $scope.openLeftMenu = function() {
\t \t $mdSidenav('left').toggle();
\t };
\t $scope.closeLeftMenu = function() {
\t \t $mdSidenav('left').toggle();
\t };
});
app.config(function ($mdThemingProvider) {
\t var customPrimary = {
\t \t '50': '#7099cd',
\t \t '100': '#5d8bc7',
\t \t '200': '#4a7ec0',
\t \t '300': '#3e71b3',
\t \t '400': '#3865a0',
\t \t '500': '#31598d',
\t \t '600': '#2a4d7a',
\t \t '700': '#244167',
\t \t '800': '#1d3554',
\t \t '900': '#172941',
\t \t 'A100': '#83a6d4',
\t \t 'A200': '#96b4db',
\t \t 'A400': '#a9c1e1',
\t \t 'A700': '#101d2e',
\t \t 'contrastDefaultColor': 'light'
\t };
\t $mdThemingProvider
\t .definePalette('customPrimary',
\t \t customPrimary);
\t var customAccent = {
'50': '#1c5956',
'100': '#226d68',
'200': '#28807b',
'300': '#2e948e',
'400': '#34a7a1',
'500': '#3abab3',
'600': '#5bccc6',
'700': '#6fd2cd',
'800': '#82d8d3',
'900': '#96deda',
'A100': '#5bccc6',
'A200': '#48c6bf',
'A400': '#3abab3',
'A700': '#a9e4e1',
\t \t 'contrastDefaultColor': 'light'
\t };
\t $mdThemingProvider
\t .definePalette('customAccent',
\t \t customAccent);
\t var customWarn = {
\t \t '50': '#f7d1cb',
\t \t '100': '#f4bdb5',
\t \t '200': '#f1a99f',
\t \t '300': '#ee9688',
\t \t '400': '#ea8272',
\t \t '500': '#e76e5c',
\t \t '600': '#e45a46',
\t \t '700': '#e04630',
\t \t '800': '#d73720',
\t \t '900': '#c1321c',
\t \t 'A100': '#fbe5e1',
\t \t 'A200': '#fef8f8',
\t \t 'A400': '#ffffff',
\t \t 'A700': '#aa2c19',
\t \t 'contrastDefaultColor': 'dark'
\t
\t };
\t $mdThemingProvider
\t .definePalette('customWarn',
\t \t customWarn);
\t $mdThemingProvider.theme('default')
\t .primaryPalette('customPrimary')
\t .accentPalette('customAccent')
\t .warnPalette('customWarn');
});<html lang="en" >
<head>
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
\t <!-- Angular Material style sheet -->
\t <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
\t <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<!--======================================================================================================================================-->
<!--
<md-icon md-font-set="material-icons">face</md-icon>
<i class="material-icons">menu</i>
-->
<!--======================================================================================================================================-->
<body ng-app="BetaApp" ng-cloak layout="column" ng-controller="SideNavController">
\t <md-toolbar md-whiteframe="3">
\t \t <div class="md-toolbar-tools">
\t \t \t <md-button class="md-icon-button" aria-label="More" ng-click="openLeftMenu()">
\t \t \t \t <i class="material-icons">menu</i>
\t \t \t </md-button>
\t \t \t <span>WideView</span>
\t \t \t <!-- fill up the space between left and right area -->
\t \t \t <span flex></span>
\t \t \t <md-button class="md-icon-button">
\t \t \t \t <i class="material-icons">search</i>
\t \t \t </md-button>
\t \t \t <md-button class="md-icon-button">
\t \t \t \t <i class="material-icons">filter_list</i>
\t \t \t </md-button>
\t \t \t <md-menu md-position-mode="target-right target">
\t \t \t \t <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
\t \t \t \t \t <i class="material-icons">more_vert</i>
\t \t \t \t </md-button>
\t \t \t \t <md-menu-content>
\t \t \t \t \t <md-menu-item>
\t \t \t \t \t \t <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">refresh</md-icon>Refresh</md-button>
\t \t \t \t \t </md-menu-item>
\t \t \t \t \t <md-menu-item>
\t \t \t \t \t \t <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">view_quilt</md-icon>Change View</md-button>
\t \t \t \t \t </md-menu-item>
\t \t \t \t </md-menu-content>
\t \t \t </md-menu>
\t \t \t
\t \t </div>
\t </md-toolbar>
\t <div layout="row" flex>
\t \t <md-content>
\t \t \t <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<span flex></span>
<md-input-container class="md-block" flex>
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex>
<label>Address</label>
<input>
</md-input-container>
</md-content>
</md-tab>
</md-tabs>
\t \t </md-content>
\t \t <md-fab-speed-dial md-direction="up" class="md-scale md-fab-bottom-right">
\t \t \t <md-fab-trigger>
\t \t \t \t <md-button aria-label="" class="md-accent md-fab">
\t \t \t \t \t <i class="material-icons">add</i> \t
\t \t \t \t </md-button>
\t \t \t </md-fab-trigger>
\t \t \t <md-fab-actions>
\t \t \t \t <md-button aria-label="" class="md-fab md-raised md-mini">
\t \t \t \t \t <i class="material-icons">share</i>
\t \t \t \t </md-button>
\t \t \t \t <md-button aria-label="" class="md-fab md-raised md-mini">
\t \t \t \t \t <i class="material-icons md-accent">add_a_photo</i>
\t \t \t \t </md-button>
\t \t \t \t <md-button aria-label="" class="md-fab md-raised md-mini">
\t \t \t \t \t <i class="material-icons">create</i>
\t \t \t \t </md-button>
\t \t \t </md-fab-actions>
\t \t </md-fab-speed-dial>
\t \t <md-sidenav md-component-id="left" class="md-sidenav-left" md-whiteframe="3" layout="column">
\t \t \t <div layout="row">
\t \t \t \t <md-button class="md-icon-button">
\t \t \t \t \t <md-icon md-font-set="material-icons">new_releases</md-icon>
\t \t \t \t </md-button>
\t \t \t \t <span flex></span>
\t \t \t \t <md-button class="md-icon-button" ng-click="closeLeftMenu()">
\t \t \t \t \t <md-icon md-font-set="material-icons">arrow_forward</md-icon>
\t \t \t \t </md-button>
\t \t \t </div>
\t \t \t <md-card md-whiteframe="2">
\t \t \t \t <md-card-header>
\t \t \t \t \t <md-card-avatar>
\t \t \t \t \t \t <img class="md-user-avatar" src="images/BigDave.png"/>
\t \t \t \t \t </md-card-avatar>
\t \t \t \t \t <md-card-header-text>
\t \t \t \t \t \t <div layout="row">
\t \t \t \t \t \t \t <div layout="column">
\t \t \t \t \t \t \t \t <span class="md-title">BigDave</span>
\t \t \t \t \t \t \t \t <span class="md-subhead">logged in</span>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <span flex></span>
\t \t \t \t \t \t \t <md-menu md-position-mode="target-right target">
\t \t \t \t \t \t \t \t <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
\t \t \t \t \t \t \t \t \t <i class="material-icons">arrow_drop_down</i>
\t \t \t \t \t \t \t \t </md-button>
\t \t \t \t \t \t \t \t <md-menu-content>
\t \t \t \t \t \t \t \t \t <md-menu-item>
\t \t \t \t \t \t \t \t \t \t <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">account_box</md-icon>Settings</md-button>
\t \t \t \t \t \t \t \t \t </md-menu-item>
\t \t \t \t \t \t \t \t \t <md-menu-item>
\t \t \t \t \t \t \t \t \t \t <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">exit_to_app</md-icon>Log out</md-button>
\t \t \t \t \t \t \t \t \t </md-menu-item>
\t \t \t \t \t \t \t \t </md-menu-content>
\t \t \t \t \t \t \t </md-menu>
\t \t \t \t \t \t </div>
\t \t \t \t \t </md-card-header-text>
\t \t \t \t </md-card-header>
\t \t \t </md-card>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<a class="ms-navigation-button ng-scope md-default-theme"e>
<i class="icon s16 icon-calendar-today" ng-if="node.icon"></i>
<span class="title ng-scope ng-binding flex" translate="" flex="">Calendar</span>
</a>
\t \t </md-sidenav>
\t \t
\t \t
\t </div>
\t <!--======================================================================================================================================-->
\t <!-- Angular Material requires Angular.js Libraries -->
\t <script src="node_modules/angular/angular.min.js"></script>
\t <script src="node_modules/angular-animate/angular-animate.min.js"></script>
\t <script src="node_modules/angular-aria/angular-aria.min.js"></script>
\t <script src="node_modules/angular-messages/angular-messages.min.js"></script>
\t <!-- Angular Material Library -->
\t <script src="node_modules/angular-material/angular-material.min.js"></script>
\t <!-- Your application bootstrap -->
\t <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
okay - http://codepen.io/camden-kid/pen/vXByKW –
私はあなたに私のコード全体を教えてもらえますか？この問題を引き起こすローカルファイルがあるかどうかを確認するだけです。 –
AngularJSまたはAngular Materialファイルのいずれかが古いバージョンである可能性があります。私のCodePenで、[設定]をクリックしてCSSファイルとJavaScriptファイルを表示し、それらがあなたのファイルと一致するかどうかを確認します。 –