stackoom
  简体   繁体   中英

Angular-Material: Error with md-stretch-tabs

 原文  2016-08-30 11:24:56  2   1    javascript/ html/ angularjs/ angular-material

Question

I'm currently developing and angular-based app.

PROBLEM: I added md-stretch-tabs to my md-tabs element but, when i switch to tab#2 my tab retracts like if there's not enought space to flex . Is it a problem of dependecies or code itself?

EDIT:added full code. 

 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>

1 answers

solution1
 0 ACCPTED  2016-08-31 09:40:44

The problem is the attributes of the div that contains your md-tabs : 

<div layout="row" flex>

if you replace it with just this 

<div>

it works fine - CodePen

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular-Material : md-select in md-dialog not closing Angular-Material md-select in md-dialog Angular-material md-button automatic hover effect Angular-Material || md-menu not closing on mobile on click of an item Use directive with required ^form in an angular-material md-dialog How to hide tab content of all the angular-material tabs Angular material separate md-tabs body Set default value on md-select When Value is an Object Angular4 Angular-Material Md-dialog popup box (angular-material) loads in as a new view (Yeoman) Passing $resource query parameters to angular-material md-chips autocomplete
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM