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

What is the behavior you are expecting? the `mat-tab` will usually take the space needed to show your full content unless you specify otherwise — IvanS95, Nov 08 '18 at 18:06
I can't override mat-tab-body-wrapper which seems to have a height and width of "fit-content" css file is in the .css file of this component in angular — Chris22311, Nov 09 '18 at 15:50

score 12 · Answer 1 · answered Jan 22 '19 at 17:38

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.

score 9 · Answer 2 · answered Jan 10 '20 at 04:47

9

That fixes the issue:

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

answered Jan 10 '20 at 04:47

Rodrigo Ferraz Villaca

91
1
1

Did this work for anyone? Adding `:host ::ng-deep` didn't make a change for me... – ineedtoknow Aug 18 '20 at 01:06
4

So, `:host ::ng-deep` didn't work for me, but adding just `::ng-deep` did. So, in full I was able to use: `::ng-deep .mat-tab-body-wrapper `. – ineedtoknow Aug 18 '20 at 01:12
`::ng-deep .mat-tab-body-wrapper` worked for me too. I like this method a lot better than adjusting the global stylesheet because this way I'm not changing the styles from other areas of my app. – PDill5446 Dec 20 '21 at 22:07

score 8 · Answer 3 · answered Jun 07 '19 at 08:11

8

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%;
}

answered Jun 07 '19 at 08:11

codeuix

1,366
1
12
18

6

I highly recommend not setting `ViewEncapsulation` to `none` unless absolutely necessary or you know exactly what you're doing. **A style defined in your global stylesheet is sufficient.** `ViewEncapsulation.None` makes any styles defined in that component global. This can lead to a number of hard to debug issues. – Dane Brouwer Jul 13 '20 at 07:59
@DaneBrouwer I know very well but do you have any other way to fix this problem. – codeuix Jul 14 '20 at 02:47
1

"**A style defined in your global stylesheet is sufficient.**" – Dane Brouwer Jul 14 '20 at 06:07

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

3 Answers3