Unable to modify the height and color of tabs in Angular 6

I am in the process of learning Angular, CSS, and HTML. I have been using MatTabsModule to create tabs, but I am having trouble adjusting the height, background, and other properties of the tabs. I am struggling to override the default properties of MatTabsModule's classes. Can someone please assist me? I have included my CSS and HTML code below. I believe that TypeScript code is not required.

HTML:

<mat-card>
 <mat-card-content>
  <mat-tab-group class="tab-group" dynamicHeight>
      <mat-tab *ngFor="let obj of tags">
          <ng-template mat-tab-label>{{ obj.name }}</ng-template>
          <div class="tab-content">
              {{ obj.name }}
          </div>
      </mat-tab>
  </mat-tab-group>
</mat-card-content>

CSS:

.tab-group {
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;

  .unicorn-dark-theme & {
    border-color: #464646;
  }
}

.tab-content {
  padding: 16px;
}

mat-card{
  padding: 0px;
}

.mat-tab-label .mat-ripple {
  min-width: 0;
  height: 30px;
}

https://i.sstatic.net/L76n5.png

I am struggling to customize the height, width, and background color of these tabs. :(

htmlcssangularangular5

Answer №1

It's not possible to access the styles of child components in your css-file due to ViewEncapsulation.Emulated preventing styles from affecting the entire app (which is the intended behavior).

Using the ng-deep selector, like so: :host ::ng-deep mat-tab { ... }, allows you to overwrite default material styles that are not configurable in any other way. It's important to note that allowing css to leak from a component is generally not recommended, and whenever possible, using @Input to pass styles is preferred.

Additionally, the :host selector ensures that styles only affect the children of this component and not the rest of the app.

Answer №2

If you want to customize the appearance of Angular Material components, you can use the ::ng-deep pseudo-class in your CSS.

Here's an example of how you can adjust the height and width of tabs:

::ng-deep .mat-tab-label {
  height: 27px !important;
  min-height: 0px !important;
  margin: 3px !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The JSP page is not showing the table content

Working on my project in Spring MVC, I am facing an issue with displaying content inside the table that lists data from the controller. To ensure that the lists are being accessed from the database, I have tested it using jUnit in my Dao file. The problem ...

javahtmlspringjspmodel-view-controller

jQuery: Revealing or concealing several divs upon selection alteration

When I populate a form, I want to display or hide multiple divs based on the OPTION selected in a DROPDOWN. Currently, my code works but the issue is that one div can be hidden or shown by multiple OPTIONS. As a result, these divs keep toggling between hi ...

javascriptjqueryhtmlcssselect

Showing data from a JavaScript controller's JSON response in an HTML table

I'm currently developing a spring app using AngularJS and I have a response coming from a JS controller. My goal is to showcase this response in a table on the webpage. The object devDebtTable is accessible to the page from the JS controller. The JS ...

javascripthtmlangularjs

Elevate your AngularJS directive by incorporating ngModel into an Angular component

Attempting to switch my AngularJS directive over to an Angular Component. Below is the original code for the directive: ng1AppModule.component('ng1Tmp', { bindings: {p: '<'}, require: {ngModel: 'ngModel'} }); Her ...

angularjsangularangularjs-directiveangular-components

Leveraging Json data in Angular components through parsing

I am currently developing an angular application where I need to retrieve and process data from JSON in two different steps. To start, I have a JSON structure that is alphabetically sorted as follows: { "1": "Andy", "2": &qu ...

javascriptnode.jsangulartypescriptangular8

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

Tips for translating an HTML webpage from Arabic to English

I have a bootstrap site with HTML pages but no backend functionality. How can I manually translate from Arabic to English, given that I already have the translations for all content and don't need to rely on translation tools? Is there a way to map Ar ...

javascripthtmlcssjsonbootstrap-4

How to dynamically insert an em tag into a table header cell using Asp.net

In my code, I have a table with dynamically generated table headers. One of the headers is for a textbox column. var thc = new TableHeaderCell { Text = "Iteration", CssClass = "iteration" } Now, I need to modify the logic to display a label indicating wh ...

c#htmlasp.net

Tips for saving an Angular project for offline use

I have created a basic form for a family member to use in their medical practice, and I want to make it functional offline. The form simply captures data and displays it, with no need to send or store the information anywhere. What would be the most effect ...

angulartypescript

Is the naming convention for parameterized types (T, U, V, W) in Generics adhered to by Typescript?

Is TypeScript following the same naming convention for parameterized types as other languages like C++ and Java, using T,U,V,W, or is there a mixed usage of conventions? In the TS 2.8 release notes, we see examples like: type ReturnType<T> = T exten ...

angulartypescriptgenericstypescript-typings

An overabundance of parallax visuals

I'm currently working on a static website that features several parallax images dividing each section. However, I've run into an issue as I continue to add more sections and parallax images. Some of the images at the bottom of the website are shi ...

javascriptjqueryhtmlcssparallax

Error encountered during production build of Angular 6 Universal with server-side rendering (SSR

I have recently delved into Angular 6 and managed to nearly complete my app. However, I am encountering some struggles with server-side rendering (SSR). Following a tutorial on SSR at this link, I tried running the command npm run build:ssr && npm ...

angularangular-universalserver-side-rendering

What could be causing the lack of reflection of Angular changes in the browser post-build process?

I'm having trouble seeing changes reflected in my Angular project after making them. I've tried clearing the cache pages and cookies in Chrome, as well as enabling disable cache in the network tab of developer tools. In addition, I cleared the a ...

node.jsangulargoogle-chrome

What are some possible causes for an iframe failing to load?

When it comes to iframes failing to load their content, there could be various reasons causing this issue. I recently encountered a situation where an iframe on my site's "thank you" page was not displaying any content when inspected using Chrome dev ...

htmliframepixel

Angular Material Progress Spinner is static and not animated

I've been attempting to incorporate an indeterminate spinner from Angular Material. After reviewing the stack blitz example provided on their official website https://stackblitz.com/angular/nkabnxaenep, I carefully compared the package jsons and could ...

angularangular-material

Instructions for utilizing the nav-pill with nav-justified components in Bootstrap3x without incorporating any responsive capabilities

I'm eager to incorporate this into my project : <div class="container"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#"> ...

jqueryhtmlcsstwitter-bootstrap-3

What steps should I take to ensure that the login page functions properly?

Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...

javascriptphphtmlcssauthentication

Tips for securely saving your login information on social media apps

Currently, I am developing an Android Social Media application. The framework is in Java and the main data is displayed through a WebView of the mobile version of my social media website. One question I have is related to saving a user's password. Is ...

javaphpandroidhtml

Angular 6 Material now allows for the selection of a mat-tab-link by displaying an underlining bar

My website features a mat-tab-nav-bar navigation bar, but I'm facing an issue with the mat-tab-link blue underlining bar. It doesn't move to highlight the active button, instead, it stays on the first button. However, the buttons do change into t ...

angulartypescriptangular-materialnavigationbar

Spacing issues with inline-block elements when dealing with a large quantity of items

Currently, I am tackling the JS/jQuery Project for The Odin Project and I am confident that my solution is working exceptionally well. However, the issue I am facing is that when dealing with larger amounts of elements (around 40-45 in JSFiddle and 50-52 ...

javascriptjqueryhtmlcss