Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime #9290

Prashant-Kan · 2018-01-08T20:56:09Z

Bug, feature request, or proposal:

Not able to add customize css class or apply css styling to any Mat-X element that are generated during runtime.

What is the expected behavior?

Customize style and add user defined CSS Class to override the behaviour of element (if required)

What is the current behavior?

Not applied

What are the steps to reproduce?

This is my html body

<mat-tab-group class="container">
                   <mat-tab label="General" >
                   <div class="container">
                       <div class="row">
                           <div class="col-sm-2 col-md-4 col-lg-6">
                              This is the test 
                           </div>
                           <div class="col-sm-2 col-md-4 col-lg-6">
                               This is the test
                           </div>
                       </div>
</div>
</mat-tab>
</mat-tab-group>

Below is the Generated Html when it runs in the browser(Chrome).

<mat-tab-group _ngcontent-c12="" class="container mat-tab-group mat-primary">
	<mat-tab-header class="mat-tab-header" ng-reflect-disable-ripple="false" ng-reflect-selected-index="0">
	
		<div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true"><div class="mat-tab-header-pagination-chevron"></div></div>
		<div class="mat-tab-label-container">
			<div class="mat-tab-list" role="tablist" style="transform: translate3d(0px, 0px, 0px);">
				<div class="mat-tab-labels">
						<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->

						<div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" ng-reflect-disabled="false" id="mat-tab-label-0-0" tabindex="0" aria-controls="mat-tab-content-0-0" aria-selected="true">

							<!--bindings={}--><!--bindings={"ng-reflect-ng-if": "true"}-->
							General
						</div> 
				</div>
				<mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 160px;"></mat-ink-bar>
			</div>
		</div>
		
		<div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple="" ng-reflect-disabled="true"><div class="mat-tab-header-pagination-chevron"></div></div>
	</mat-tab-header>

<div class="mat-tab-body-wrapper">
	<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
	<mat-tab-body class="mat-tab-body ng-tns-c23-28 mat-tab-body-active ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="0" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0" ng-reflect-origin="0">
	
		<div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;"><!---->
			<div _ngcontent-c12="" class="container ng-star-inserted" style="">
				<div _ngcontent-c12="" class="row">
					<div _ngcontent-c12="" class="col-sm-2 col-md-4 col-lg-6">
						This is the test
					</div>
					<div _ngcontent-c12="" class="col-sm-2 col-md-4 col-lg-6">
						This is the test
					</div>
				</div>
			</div>
	<!----></div>
	</mat-tab-body> 
</div>

.

REQUEST.
Want to add "MyTabClass" to the "div.mat-tab-body-content". I tried adding css style using !important, but still fails to apply custom styling or custom css class to the tags which are generated at runtime.

Please anybody aware about how to implement this guide me.
I am new to the Material Design with Angular 2

What is the use-case or motivation for changing an existing behavior?

To have a upperhand in the styling, when required. Usually we are using the default behaviour of material controls.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest version of all.
OS- windows 10

Is there anything else we should know?

Yes, this is not specifically related to the Mat-tabs. I was searching the way to apply custom css to any of the mat-X controls sub-elements which are auto-generated during rendering in browser

The text was updated successfully, but these errors were encountered:

willshowell · 2018-01-08T20:59:24Z

You are likely just encapsulating your styles. Take a look at this guide and see if it helps:

https://material.angular.io/guide/customizing-component-styles

ovoronin · 2018-03-21T08:58:09Z

Why is this closed? <mat-tab> classes are not applied anywhere

willshowell · 2018-03-21T19:19:43Z

@ovoronin if you place the styles in a global stylesheet or remove view encapsulation from your component styles, they'll be applied.

ovoronin · 2018-03-22T08:36:29Z

@willshowell
For example I have

<mat-tab-group>
   <mat-tab label="First" class="first">First</mat-tab>
   <mat-tab label="Second" class="second">Second</mat-tab>
</mat-tab-group>

Generated HTML is like this

<mat-tab-group>
   <mat-tab-header>...</mat-tab-header>
   <div class="mat-tab-body-wrapper">
      <mat-tab-body class="mat-tab-body mat-tab-body-active">
        <div class="mat-tab-body-content">First</div>
      </div>
      <mat-tab-body class="mat-tab-body">
        <div class="mat-tab-body-content">Second</div>
      </div>
   </div>
</mat-tab-group>

As you can see there are no CSS classes 'first' and 'second' anywhere
It will be good to have them applied to corresponding mat-tab-body elements

willshowell · 2018-03-22T14:03:14Z

I see. What DOM element would you expect to receive the class?

You could do this if you just wanted to style the body:

<mat-tab-group>
  <mat-tab label="First">
    <div class="first">First</div>
  </mat-tab>
  <mat-tab label="Second">
    <div class="second">Second</div>
  </mat-tab>
</mat-tab-group>

ovoronin · 2018-03-22T14:05:12Z

@willshowell
I was trying to style mat-tab-body elements to fix some scrolling stuff

borsini · 2018-03-23T07:50:19Z

@ovoronin I also wanted to style mat-tab elements, making them take all the available height.

I fixed them with flexbox using mat-tab-group { flex: 1; }in the component stylesheet and .mat-tab-body-wrapper { flex: 1; } in the global stylesheet.

Quick and dirty. It works but I'm quite sure it is not the best option 😟

karthickDhanapal · 2018-03-29T13:30:20Z

How to disable the animation that have been trigged when tab clicked ngtrigger translate-tab css

hlgrondijs · 2018-05-25T11:38:28Z

I have the same type of issue, where angular generates a wrapping <div> element inside the of the <mat-tab> tag in the generated code. In my case this <div> has display: flex set, where I want it to be display: block

My intuition tells me this is not the way we should be styling these elements. These generated components should never have to be touched if Angular is/was designed well. However if I change the display to block in DevTools as said above, I get the desired design and with flex I don't so, yeah... if it's possible, would like to know how :D

shootdaj · 2018-05-29T21:48:00Z

@willshowell What if placing them in the global styles is not possible? I have two types of tabs in my mat-tab-group and need to apply different styles to them. How would I accomplish this without applying classes to the specific mat-tabs?

willshowell · 2018-05-29T22:10:19Z

@shootdaj I think you might be limited to a workaround like some manual class manipulation.

@andrewseguin what do you think? would it be possible to allow classes be applied to mat-tab?

benawhite · 2018-07-19T16:03:20Z

@willshowell
If a class was applied to the mat-tab, I would expect the generated html to apply the class to both the label and the body. This would allow the dev to manage both with the addition of the appropriate selector. (.mat-tab-label.first or .mat-tab-body.first)

<mat-tab-group>
   <mat-tab label="First" class="first">First</mat-tab>
   <mat-tab label="Second" class="second">Second</mat-tab>
</mat-tab-group>

Generated HTML is like this

<mat-tab-group>
   <mat-tab-header>
      ...
      <div class="mat-tab-label first">...</div>
      <div class="mat-tab-label second">...</div>
      ...
  </mat-tab-header>
   <div class="mat-tab-body-wrapper">
      <mat-tab-body class="mat-tab-body first">
        <div class="mat-tab-body-content">First</div>
      </div>
      <mat-tab-body class="mat-tab-body second">
        <div class="mat-tab-body-content">Second</div>
      </div>
   </div>
</mat-tab-group>

Hypenate · 2018-11-21T09:34:15Z

@willshowell Any news on this? It would be great to have some flexibility over the control.

I tried to style a specific tab, but the class/style is thrown away when the tabs are generated in the browser.

EnricoSaunders · 2018-12-13T07:20:07Z

You can use ng-template:

<mat-tab>
    <ng-template mat-tab-label>
        <span class="first">First Tab</span>
    </ng-template>
    ...

simeyla · 2019-02-23T02:37:20Z

@shootdaj I found by accident once that you can add global styles with ::ng-deep

Just use ::ng-deep like this in ANY component - not nested under anything, and it will be propagated to root styles (assuming the defining component has been displayed) :

 // propagate to root styles
 ::ng-deep div { outline: 1px solid hotpink; }

You can do this to avoid having to put things in root styles - perhaps you don't have access to it, or you're writing a debugging control. Also this approach may not work forever, so you'll have to make your own judgement based on that.

I wish they would just officially support :root

guibot17 · 2019-03-10T11:03:22Z

As of today, the best approach I've found is just using inline styling:

<div style="display: block; color: blue;">
<div>content</div>
</div>
It was great for me. I hope it helps you all.

nazarov-dmitry · 2019-03-27T15:36:02Z

we can use CSS :nth-child() Selector. Thank you

Jasonkoolman · 2019-04-13T13:34:06Z

A clean solution would be to:

Apply a (custom) class to the <mat-tab-group> element.

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

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 {
  background: #eee;
}
.custom-tabs .mat-tab-body {
  padding: 20px;
}

In some cases you don't want to globally define all component styles, which happens when you disable view encapsulation. To prevent this, simply create a component that's dedicated to display (and style) tab groups.

anysunflower · 2019-07-15T10:08:14Z

I have to hack the css of mat-tab because when I use popover in mat-tab
the pop-over will hide by the overflow set in mat-tab-body-wrapper and .mat-tab-body.mat-tab-body-active
I use :host ::ng-deep to hack the mat-tab style

:host ::ng-deep .mat-tab-body-wrapper {
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    .mat-tab-body.mat-tab-body-active {
        overflow-x: visible;
        overflow-y: visible;
    }
}

angular-automatic-lock-bot · 2019-09-11T02:02:33Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

andrewseguin closed this as completed Jan 9, 2018

niekvb mentioned this issue Aug 23, 2019

Can't assign custom class for mat-tab #15997

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime #9290

Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime #9290

Prashant-Kan commented Jan 8, 2018 •

edited

Loading

willshowell commented Jan 8, 2018

ovoronin commented Mar 21, 2018 •

edited

Loading

willshowell commented Mar 21, 2018

ovoronin commented Mar 22, 2018

willshowell commented Mar 22, 2018

ovoronin commented Mar 22, 2018 •

edited

Loading

borsini commented Mar 23, 2018

karthickDhanapal commented Mar 29, 2018

hlgrondijs commented May 25, 2018 •

edited

Loading

shootdaj commented May 29, 2018

willshowell commented May 29, 2018

benawhite commented Jul 19, 2018 •

edited

Loading

Hypenate commented Nov 21, 2018

EnricoSaunders commented Dec 13, 2018 •

edited

Loading

simeyla commented Feb 23, 2019

guibot17 commented Mar 10, 2019 •

edited

Loading

nazarov-dmitry commented Mar 27, 2019

Jasonkoolman commented Apr 13, 2019 •

edited

Loading

anysunflower commented Jul 15, 2019

angular-automatic-lock-bot bot commented Sep 11, 2019

Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime #9290

Add Customize Css Class to the Mat-Tab-Content and other Mat-X tags which are generated runtime #9290

Comments

Prashant-Kan commented Jan 8, 2018 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

willshowell commented Jan 8, 2018

ovoronin commented Mar 21, 2018 • edited Loading

willshowell commented Mar 21, 2018

ovoronin commented Mar 22, 2018

willshowell commented Mar 22, 2018

ovoronin commented Mar 22, 2018 • edited Loading

borsini commented Mar 23, 2018

karthickDhanapal commented Mar 29, 2018

hlgrondijs commented May 25, 2018 • edited Loading

shootdaj commented May 29, 2018

willshowell commented May 29, 2018

benawhite commented Jul 19, 2018 • edited Loading

Hypenate commented Nov 21, 2018

EnricoSaunders commented Dec 13, 2018 • edited Loading

simeyla commented Feb 23, 2019

guibot17 commented Mar 10, 2019 • edited Loading

nazarov-dmitry commented Mar 27, 2019

Jasonkoolman commented Apr 13, 2019 • edited Loading

anysunflower commented Jul 15, 2019

angular-automatic-lock-bot bot commented Sep 11, 2019

Prashant-Kan commented Jan 8, 2018 •

edited

Loading

ovoronin commented Mar 21, 2018 •

edited

Loading

ovoronin commented Mar 22, 2018 •

edited

Loading

hlgrondijs commented May 25, 2018 •

edited

Loading

benawhite commented Jul 19, 2018 •

edited

Loading

EnricoSaunders commented Dec 13, 2018 •

edited

Loading

guibot17 commented Mar 10, 2019 •

edited

Loading

Jasonkoolman commented Apr 13, 2019 •

edited

Loading