AngularJS Material Tab height issue

Question

I\'m having some troube figuring things out with AngularJS Material, I was wondering if anyone knew why the folling piece of code:

Answer 1

If the issue you're trying to solve is that the tabs do not take up the full available height:

1. As far as I know, it's impossible to do this via existing md attributes (and I've spent hours researching this)

2. 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)

3. Here is a way to fix this that worked for me:

   Make sure every parent element has layout="column" and layout-fill attributes (or layout-column and layout-fill classes). This includes if that's relevant for your use case.

IMPORTANT NOTE ABOUT CUSTOM COMPONENTS CREATED VIA COMPONENT ROUTER:

In my case my html structure is ng-outlet -> custom-component -> md-card -> md-tabs

I added layout="column" and layout-fill to and and added layout="column" to . However, I couldn't find a way to add them to (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');
    };
}