Menu
I am trying to occupy the space of the full page but I can't seem to get the height of the tabs right on angular-material 0.10.0, unless I add .ng-scope { height: 100%; }.
Is there a better way to achieve full page tabs?
Full test code: (and here)
<!DOCTYPE html><meta charset="utf-8">
<html ng-app="app" ng-controller="appController">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<script>
var app_module = angular.module('app', ['ngMaterial']);
var app = document.querySelector('[ng-app=app]');
app_module.controller('appController', function ($scope) {});
app_module.config(function($mdThemingProvider) {
$mdThemingProvider.theme("default").primaryPalette('grey').accentPalette("indigo").dark();
});
</script>
</head>
<body layout="column">
<md-tabs flex layout="column" class="md-accent" style="background:red">
<md-tab flex layout="column" label="A" style="background:green">
<div flex style="background:blue">A</div>
</md-tab>
<md-tab label="B">
<div flex style="background:cyan">B</div>
</md-tab>
</md-tabs>
</body>
</html>
I must add that it works fine on 0.9.0
643
By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.
Tabs and navigation While <mat-tab-group> is used to switch between views within a single route, <nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.
The solution from @nitin didn't work for me probably cause the version of angular material that I'm using. My solution was to add the md-dynamic-height attribute to the md-tabs tag.
According to this issue
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
