Angular Material: full page tabs size

html css angularjs angular-material

18,685

Solution 1

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

Solution 2

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

Solution 3

This can be accomplished by adding the following attribute to your md-tabs element:

md-tabs md-stretch-tabs="yes"

18,685

Author by

Inuart

Updated on July 18, 2022

Comments

Inuart almost 2 years

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

Inuart almost 9 years

you are using Angular Material 0.9.0, my problem is with 0.10.0
Inuart almost 9 years

Nice! So I needed md-tab-content. Thank you. You should update your answer.
A.W. over 6 years

Using v1.1.5 and copied this example but it doesn't work for me.
nitin over 6 years

@Guus share a plunk
Owen Johnson about 6 years

That stretches the tab headers horizontally. I don't think that's what they were looking for.
Jeff Pal almost 5 years

Fine. It works for me. I'm using angular-material: 1.1.10.