Angular-Material：md-stretch-tabs 错误答案

【问题标题】：Angular-Material: Error with md-stretch-tabsAngular-Material：md-stretch-tabs 错误
【发布时间】：2017-09-08 21:26:23
【问题描述】：

我目前正在开发基于角度的应用程序。

问题：我在md-tabs 元素中添加了md-stretch-tabs，但是当我切换到标签#2 时，我的标签会缩回，就像flex 没有足够的空间一样。是依赖问题还是代码本身的问题？

编辑：添加完整代码。

var app = angular.module('BetaApp', ['ngMaterial']);

app.controller('SideNavController', function($scope, $mdSidenav) {
	$scope.openLeftMenu = function() {
		$mdSidenav('left').toggle();
	};
	$scope.closeLeftMenu = function() {
		$mdSidenav('left').toggle();
	};
});

app.config(function ($mdThemingProvider) {
	var customPrimary = {
		'50': '#7099cd',
		'100': '#5d8bc7',
		'200': '#4a7ec0',
		'300': '#3e71b3',
		'400': '#3865a0',
		'500': '#31598d',
		'600': '#2a4d7a',
		'700': '#244167',
		'800': '#1d3554',
		'900': '#172941',
		'A100': '#83a6d4',
		'A200': '#96b4db',
		'A400': '#a9c1e1',
		'A700': '#101d2e',
		'contrastDefaultColor': 'light'
	};
	$mdThemingProvider
	.definePalette('customPrimary', 
		            customPrimary);

	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',
		'contrastDefaultColor': 'light'
	};
	$mdThemingProvider
	.definePalette('customAccent', 
		            customAccent);

	var customWarn = {
		'50': '#f7d1cb',
		'100': '#f4bdb5',
		'200': '#f1a99f',
		'300': '#ee9688',
		'400': '#ea8272',
		'500': '#e76e5c',
		'600': '#e45a46',
		'700': '#e04630',
		'800': '#d73720',
		'900': '#c1321c',
		'A100': '#fbe5e1',
		'A200': '#fef8f8',
		'A400': '#ffffff',
		'A700': '#aa2c19',
		'contrastDefaultColor': 'dark'

	
	};
	$mdThemingProvider
	.definePalette('customWarn', 
		            customWarn);

	$mdThemingProvider.theme('default')
	.primaryPalette('customPrimary')
	.accentPalette('customAccent')
	.warnPalette('customWarn');
});

<html lang="en" >
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	<!-- Angular Material style sheet -->
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
	<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">

	<md-toolbar md-whiteframe="3">
		<div class="md-toolbar-tools">
			<md-button class="md-icon-button" aria-label="More" ng-click="openLeftMenu()">
				<i class="material-icons">menu</i>
			</md-button>
			<span>WideView</span>
			<!-- fill up the space between left and right area -->
			<span flex></span>
			<md-button class="md-icon-button">
				<i class="material-icons">search</i>
			</md-button>
			<md-button class="md-icon-button">
				<i class="material-icons">filter_list</i>
			</md-button>
			<md-menu md-position-mode="target-right target">
				<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
					<i class="material-icons">more_vert</i>
				</md-button>
				<md-menu-content>
					<md-menu-item>
						<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">refresh</md-icon>Refresh</md-button>
					</md-menu-item>
					<md-menu-item>
						<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">view_quilt</md-icon>Change View</md-button>
					</md-menu-item>
				</md-menu-content>
			</md-menu>
			
		</div>
	</md-toolbar>

	<div layout="row" flex>
		<md-content>


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


		</md-content>



		<md-fab-speed-dial md-direction="up" class="md-scale md-fab-bottom-right">
			<md-fab-trigger>
				<md-button aria-label="" class="md-accent md-fab">  
					<i class="material-icons">add</i>  	
				</md-button>
			</md-fab-trigger>
			<md-fab-actions>
				<md-button aria-label="" class="md-fab md-raised md-mini">
					<i class="material-icons">share</i>  
				</md-button>
				<md-button aria-label="" class="md-fab md-raised md-mini">
					<i class="material-icons md-accent">add_a_photo</i>   
				</md-button>
				<md-button aria-label="" class="md-fab md-raised md-mini">
					<i class="material-icons">create</i>   
				</md-button>
			</md-fab-actions>
		</md-fab-speed-dial>




		<md-sidenav md-component-id="left" class="md-sidenav-left" md-whiteframe="3" layout="column">
			<div layout="row">
				<md-button class="md-icon-button">
					<md-icon md-font-set="material-icons">new_releases</md-icon>
				</md-button>
				<span flex></span>
				<md-button class="md-icon-button" ng-click="closeLeftMenu()">
					<md-icon md-font-set="material-icons">arrow_forward</md-icon>
				</md-button>

			</div>
			<md-card md-whiteframe="2">
				<md-card-header>

					<md-card-avatar>
						<img class="md-user-avatar" src="images/BigDave.png"/>
					</md-card-avatar>
					<md-card-header-text>
						<div layout="row">
							<div layout="column">
								<span class="md-title">BigDave</span>
								<span class="md-subhead">logged in</span>
							</div>
							<span flex></span>
							<md-menu md-position-mode="target-right target">
								<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
									<i class="material-icons">arrow_drop_down</i>
								</md-button>
								<md-menu-content>
									<md-menu-item>
										<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">account_box</md-icon>Settings</md-button>
									</md-menu-item>
									<md-menu-item>
										<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">exit_to_app</md-icon>Log out</md-button>
									</md-menu-item>
								</md-menu-content>
							</md-menu>
						</div>
					</md-card-header-text>
				</md-card-header>
			</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>
		</md-sidenav>

		


		


	</div>


	<!--======================================================================================================================================-->


	<!-- Angular Material requires Angular.js Libraries -->
	<script src="node_modules/angular/angular.min.js"></script>
	<script src="node_modules/angular-animate/angular-animate.min.js"></script>
	<script src="node_modules/angular-aria/angular-aria.min.js"></script>
	<script src="node_modules/angular-messages/angular-messages.min.js"></script>

	<!-- Angular Material Library -->
	<script src="node_modules/angular-material/angular-material.min.js"></script>

	<!-- Your application bootstrap  -->
	<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

【问题讨论】：

看起来不错 - codepen.io/camden-kid/pen/vXByKW
好的，我可以给你我的整个代码吗？只是看看我的本地文件是否会出现这个问题。
您的 AngularJS 或 Angular Material 文件之一可能是旧版本。在我的 CodePen 中单击设置以查看 CSS 和 JavaScript 文件，看看它们是否与您的匹配。
是的，而且看起来都是最新的
我也尝试在本地下载所有依赖项，但这个错误仍然存在。我认为这可能是代码错误，但我找不到它在哪里。

标签： javascript html angularjs angular-material

【解决方案1】：

问题在于包含您的md-tabs 的div 的属性：

<div layout="row" flex>

如果你只用这个替换它

<div>

它工作正常 - CodePen

【讨论】：

哼...我该怎么做呢？我不是这个论坛的专家。
这不适用于新版本的 angular-material (1.1.5)