What is the correct method for decreasing the width of tab labels in Angular Material?

Addressing the Issue

Given that /deep/, >>>, and ::ng-deep are no longer recommended, what is the appropriate approach to reduce the width of mat-tab-label which has a minimum width of 160px on desktop devices?

  • Is there a way to achieve this without directly overriding it in the main styles.css file?
  • I aim to keep this customized styling of Material Tabs contained within the parent component.

Guidelines from Material Design

Fixed tabs display all tabs on one screen, with each tab at a fixed width.
The width of each tab is determined by dividing the number of tabs by the screen width.
They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

In my scenario, however, the max-width of my parent component is restricted to 320px, giving approximately 106px for each mat-tab-label.

Update 1

The Angular Material documentation suggests to 

Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.
. However, I prefer to avoid this for better separation of concerns.

javascriptangulartypescriptangular-material

Answer №1

I decided to create a unique custom design for the MatTab component by implementing it in the global stylesheet called styles.css:

your-unique-selector {
  .mat-tab-label {
    min-width: 30px !important; // This overrides the default width and ensures tabs fill remaining space
    padding: 7px;
  }
}
  • Using a specific selector like your-unique-selector prevents the custom styles from affecting other instances of MatTab.
  • Remember to include mat-stretch-tabs on the <mat-tab-group> element to make Angular Material tabs stretch to fit the parent's width.

Answer №2

This solution successfully helped me resize the tabs to fit the screen in Material 18.

::ng-deep .mat-mdc-tab.mdc-tab {
    min-width: auto; //or you can specify a size
}

Remember to include these settings in your mat-tab-group

<mat-tab-group mat-stretch-tabs="true" disablePagination="true">

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

Syntax error in node/express: missing closing parenthesis after argument list

Just starting out with Node.js... const express = require('express'); const bodyParser= require('body-parser'); const MongoClient = require('mongodb').MongoClient; const app = express(); app.use(bodyParser.urlencoded({extend ...

javascriptnode.jsexpress

All outcomes being displayed from Youtube's json feed

Currently, I am retrieving a youtube playlist by using the following link: I'm curious if there is a method to display all 250 videos from my feed instead of just the 25 that are currently being shown. Any assistance on this matter would be highly a ...

javascriptjsonyoutubefeed

Unable to retrieve the value entered in the md-input field

I am facing an issue with my md-dialog in which the model of the input field is coming up as undefined on the controller even after clicking the top up button. <md-dialog aria-label="Top Up User" ng-cloak> <md-dialog-content> <div cla ...

angularjsangular-material

Trigger the datepicker's onselect event programmatically

Does anyone know how to manually trigger the onselect event of a datepicker? My code is currently functioning correctly (retrieving data from a database based on the value of the datepicker's altfield), but I'm having an issue where the onselect ...

javascriptjqueryjquery-uidatepicker

Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...

javascriptcssreactjsflexboxmaterial-ui

Avoid storing js files in cache during the development phase

When I use django runserver for development, I encounter the issue of my javascript file being cached. It's difficult to determine if the file is cached or not unless I manually add alert or console.log statements each time I make a change just to che ...

javascripthtmldjango

Transferring JSON information from JavaScript to PHP using Jquery AJAX

Struggling to send JSON data from JavaScript to a PHP script using the code below. While debugging, "isRunning" initially shows true, indicating that AJAX is not running. However, when it moves to the next part of the AJAX code, "isRunning" changes to fal ...

javascriptphpjqueryajaxjson

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Error: React unable to locate module './WebpackMissingModule'

Recently I started diving into React, and I'm encountering some difficulties trying to export components. Here is my current index.js file setup: import React from 'react'; import ReactDOM from 'react-dom'; import SearchBar from ...

javascriptreactjsreact-redux

An unusual html element

During a recent exploration of a website's code using the inspect tool, I stumbled upon a tag that was completely unfamiliar to me. <gblockquote></gblockquote> I've come across a blockquote before, but never a gblockquote. Interest ...

javascripthtml

"DataTransfer object in IE 10 does not contain any information when using drag and drop

I am struggling with my drag and drop upload code in IE 10. The event handlers in my code are as follows: dragCatcher.on('drop', function (e) { e.preventDefault(); e.stopPropagation(); console.log(e.originalEvent.dataTransfer.files); }).on ...

javascriptjqueryhtmldrag-and-drop

The tRPC setData hook is limited in its ability to access all data necessary for optimistic UI updates

As I integrate mutations using tRPC and React Query to optimistically update my UI upon adding a new item, I've encountered an issue. The problem lies in the query I'm updating, which requires specific properties like auto-generated IDs or datab ...

typescriptnext.jsreact-querytrpc.iooptimistic-ui

Can a constructor function be utilized as a parameter type in another function within TypeScript?

Recently, I came across TypeScript and after watching some video reviews, I see great potential in it. It seems to offer better code completion, implicit code documentation, and enhanced type safety for JavaScript. I'm currently in the process of con ...

javascriptangularjstypescript

Angular is not able to access the value of a promise in a different function after it has been retrieved

I have a form with default values that should be added to the form fields when it appears. There are two functions: #1 for fetching data from the backend and #2 for displaying the form: person$: any; ngOnInit() { this.getPersonData(123) this.buildPer ...

angulartypescript

NextJS and Context API throwing a Typescript error

I've been working on my _app.tsx file and here's the code snippet I have: import React from 'react' import type { AppProps } from 'next/app' /* Import Styles */ import '@themes/index.scss' /* Import Template */ imp ...

reactjstypescriptnext.js

JavaScript: Retrieve the Number of Subscribers on the BroadcastChannel

Is there a way to check if a Broadcast channel exists and see how many subscribers it has? We have a product link, and some Chrome tabs are subscribed to a Broadcast channel. We want to determine the number of listeners. const bc = new window.BroadcastCha ...

javascriptangulartypescriptgoogle-chromebroadcast-channel

Adding a marker to Google Maps in React that displays the user's current location

I successfully integrated Google Maps into my website and now I want to add a marker for the user's location. The first file is Map.js, and the second one is MapContainer.js. In MapContainer.js, I have all the necessary data for map rendering, includi ...

javascriptreactjs

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript

Discover the best method for sending multiple API requests to Vuex store using Nuxt middleware

I am having trouble figuring out how to make multiple API calls to Vuex store from Nuxt middleware. I have successfully implemented it for a single API call, but I can't seem to get it working for multiple APIs. // middleware/log.js import axios fro ...

javascriptvue.jsvuejs2vuexnuxt.js

Removing the empty option in a select dropdown

I am facing an issue with the code below: <select id="basicInput" ng-model="MyCtrl.value"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3"& ...

javascriptangularjshtmlselectangular-ngmodel