Mat-tab-body-wrapper, cannot edit css (angular)

Question

I can't change the mat tab body wrapper which seems to be limiting the size of my mat-tab.

ex.

.mat-tab-body-wrapper {
  height: 100%:
}

Sorry, Stackoverflow is is forcing me to comment out some unnecessary stuff as you can see with NG-template and my bar chart.

  <mat-tab-group mat-stretch-tabs>
     <mat-tab>
        'angular template and mat tab label'
              'extraneous elements'
        'end angular template and mat table label'
        <div class="container">
           'extraneous elements'
              <div style="display: block">
                 <canvas> 
                   /*My Bar chart*/
                 </canvas>
              </div>
        </div>               
     </mat-tab>
  </mat-tab-group>

EDIT:

You can actually override elements like this (i.e. mat-tab of angular material) using ::ng-deep

Answer 1

It's because of the View Encapsulation. By default, Angular scope the styles, so if you write in your my-component.component.css the following

mat-tab-body-wrapper {
   height: 100%;
}

then the css is compiled to something like

[_nghost-c15] mat-tab-body-wrapper[_ngcontent-c15] { 
   height: 100%;
}

and therefore the style is not applied, because the selector don't match.

To solve your problem, just copy your css in the global stylesheet (i.e. styles.css), but be careful, this action will affect all your bodies from material tabs.

Answer 2

That fixes the issue:

:host ::ng-deep .mat-tab-body-wrapper {
    height: 100%;
}

Answer 3

Here is s simple way to fix your problem. Apply a custom css to the element.

<mat-tab-group class="custom-tabs"></mat-tab-group>

Import ViewEncapsulation in '@angular/core'

import { Component,ViewEncapsulation  } from '@angular/core';

Disable view encapsulation in the component which displays the tabs.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

You can now style both .mat-tab-body and .mat-tab-body-wrapper.

.custom-tabs .mat-tab-body-wrapper {
  height: 100%;
}