Angular Material: full page tabs size
Question
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%; } .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
5 answers
solution1
12 ACCPTED 2015-08-04 07:38:23
You need to use angular-material's 'layout-fill' attribute.
layout-fill forces the layout element to fill its parent container
<body layout="column">
<md-tabs flex layout="column" layout-fill class="md-accent" style="background:red" >
<md-tab flex layout="column" label="A" style="background:green">
<md-tab-content flex style="background:blue" layout-fill>A</md-tab-content>
</md-tab>
<md-tab label="B" layout-fill>
<md-tab-content flex style="background:cyan" layout-fill>B</md-tab-content>
</md-tab>
</md-tabs>
</body>
Plunker Here
solution2
4 2016-10-22 01:04:02
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
solution3
1 2017-10-26 06:21:27
This can be accomplished by adding the following attribute to your md-tabs element:
md-tabs md-stretch-tabs="yes"
solution4
0 2015-08-04 02:14:55
Not really a better way. Is there a reason why you do not want to use 100% height on .ng-scope?
A height of 100% is usually pretty hard to grasp for beginners (not saying you are) because it rarely behaves as expected. There is a spec for use of viewport units but it isn't really better or worse per say.
solution5
-1 2016-06-16 10:48:17
Here is how managed to to getmd-tabs to take up full available height.
Some notes first:
AFIK i is impossible to do this via existing md attributes (and I've spent hours researching this)
It will not be fixed by the team anytime soon (see comment from ThomasBurleson on June 10, 2016 here: https://github.com/angular/material/issues/2254 )
The solution:
Make sure every parent element has layout="column" and layout-fill attributes (or layout-column and layout-fill classes). This includes <ng-outlet> if that's relevant for your use case.
IMPORTANT NOTE ABOUT CUSTOM COMPONENTS CREATED VIA COMPOENET ROUTER:
In my case my html structure is ng-outlet -> custom-component -> md-card -> md-tabs
I added layout="column" and layout-fill to <ng-outlet> and <md-card> and added layout="column" to <md-tabs> . However, I could not find a way to add them <account-component> (because it's created dynamically by Angular) so what I ended up doing is adding this (somewhat hacky) code to my component controller (ES6 but should be understandable even if you write ES5):
import template from './account.html';
export const accountComponent = {
template: template,
controller: accountController,
};
/*@ngInject*/
function accountController (accountService) {
this.data = accountService.getAccountData();
/*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
this.$routerOnActivate = function () { // nextRoute
const classes = document.querySelector('account-component').classList;
classes.add('layout-column');
classes.add('layout-fill');
};
}
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.