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
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.
That fixes the issue:
:host ::ng-deep .mat-tab-body-wrapper {
height: 100%;
}
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%;
}
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