Tips for creating a unique custom rounded underline effect in an Angular Material Tab

Our design team has requested that we incorporate underlines that resemble the top half of a rectangle with rounded corners. We are currently using Angular Material, but I am facing difficulties in styling the existing tabs component (https://material.angular.io/components/tabs/examples)

I managed to make the default underline thicker and with rounded corners by adjusting these variables:

--mdc-tab-indicator-active-indicator-height: 6px;

--mdc-tab-indicator-active-indicator-shape: 10px;

This is what I have achieved so far:
https://i.stack.imgur.com/g5CuI.png

I'm unsure of how to proceed and would appreciate any guidance before considering creating a custom component from scratch.

cssangularangular-material

Answer №1

@Thuan pointed out the following CSS solution, along with a functioning demonstration!

.mdc-tab-indicator .mdc-tab-indicator__content {
  color: #a31b56 !important;
  border-color: #a31b56 !important;
  border-top-width: 7px !important;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
}

Check out the live example on stackblitz

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

A recursive approach for constructing a tree structure in Angular

Currently, I am working on a project involving the implementation of crud functions. To display the data in a tree-like structure, I am utilizing the org chart component from the PrimeNg library. The data obtained from the backend is in the form of an arra ...

javascriptangularprimeng

Utilizing Angular 7 in an Apache Server environment to include the Instagram API redirect URL with the useHash set to true

I'm currently having trouble setting up my Angular Application on an Apache Server. The issue I'm encountering involves Instagram authentication. When wanting to allow direct access to a specific Angular page on the Apache server, for example ht ...

angularapacheurlinstagram-apiangular7

Centering an icon in tandem with Typography text using Material UI

Is there a way to align an icon with the text so that they are on the same level? Currently, it seems like the icon is slightly above the text. I've tried using padding-top: 5px and margin-top: 5px, but those solutions didn't work as expected. ...

cssreactjsmaterial-uireact-icons

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Creating a responsive and engaging user interface can be achieved by adding animation effects to

I am currently utilizing Ionic 2+ and attempting to add animation to an image using animate.css. Upon initial loading, the image should display a rubberBand animation, and with each click, it should switch to a bounce animation. The rubberBand animation wo ...

angularionic2

"Encountering a problem with the debounceTime operator in rxjs and HTTP requests while using the keyup

I have been working on implementing server-side search in Angular 7. I managed to find some code for implementation, but unfortunately it is not functioning as expected. The issue I am encountering is that when searching for a string, the code sends mult ...

angulartypescripthttprxjsangular7

Struggling to implement mock JSON data, unable to dynamically update on HTML page

Although the data is being displayed, I am facing issues with getting the images to appear correctly based on the syntax and code. <h2>Amazing Places on Earth</h2> <div class="card"> <div class=" card-block"> <im ...

node.jsangularrestangular-services

Ways to display distinct text boxes based on selected radio button?

Currently, I am working with JSP and have implemented an HTML form that includes a "Process" button at the top. When this button is clicked, it displays a form with two radio buttons - TestClient and TestServer. The form also contains a Submit button. If ...

javascriptjqueryhtmlcssforms

Solution to ensure fixed header with correct z-index placement

Everything is functioning correctly, except for the issue that arises when scrolling down to view thumbnails. The left bar covers the thumbnail section, making it impossible to select items. I suspect that the z-index of a div is causing this problem. I ha ...

cssz-index

Converting a string to a number in an Angular template

Within my select box, I am capturing the selected value and binding it to the variable startingYear. However, I need the type of startingYear to be a number, but it is currently registering as a string. Is there a way to convert it to a number? console ...

angulartypescript

Attempting to create a multi-page slider using a combination of CSS and JavaScript

Looking for help with creating a slider effect that is triggered when navigating to page 2. Ideally, the div should expand with a width of 200% or similar. Any assistance would be greatly appreciated! http://jsfiddle.net/juxzg6fn/ <html> <head& ...

javascripthtmlcssslider

Struggling to animate the selector of a nested div in Jquery?

Despite trying numerous variations, I am struggling to identify the correct selector of a nested div. The goal is to animate this particular div, but since no animations are taking place, I suspect that I have not selected the right element. Here is the a ...

javascriptjqueryhtmlcss

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascripthtmlcss

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

jquerycssjqgrid

Exploring the capabilities of google-diff-match-patch within the Angular framework

Seeking a way to incorporate the google diff/match/patch lib into an Angular application for displaying the variance between two texts. Here's how I plan on using it: public ContentHtml: SafeHtml; compare(text1: string, text2: string):void { var ...

javascriptangulartypescriptgoogle-diff-match-patch

Running an HTTP request conditionally within combineLatest

I'm working on a combineLatest function that makes 2 http requests, but I only want the second request to be made if a specific condition is satisfied. combineLatest([ this.leadsService.fetchALLLeadsActivityChart(this.clientId, this.getParams(option ...

angulartypescript

When implementing the Slick Carousel with autoplay within an Isotope grid, the height of the image slides may occasionally reduce to 1 pixel when applying filters

I've been struggling with this issue for more than a day now, and despite searching through similar posts and trying their solutions, I still haven't been able to resolve it. Here's an example of the problem: https://jsfiddle.net/Aorus/1c4x ...

jquerycssbootstrap-4jquery-isotopeslick.js

Retrieving the previous and current URL in Angular 8

Need help setting variables prevUrl and currentUrl in Angular 8 by fetching previous and current URLs. The scenario involves two components - StudentComponent and HelloComponent. When transitioning from HelloComponent to StudentComponent, I face an issue. ...

angular

what methods do you use to recall codes?

Hey there! I've recently started diving into the world of HTML, CSS, and Php. I'm curious, how exactly do experienced coders manage to remember so many functions? Is it something that comes with time and practice? As a beginner myself, this quest ...

phphtmlcssserver-sideweb-development-server

What are the steps to employ a query string to display a specific image?

If I understand correctly, I can utilize a query string and parse it to display certain information. How would I apply that concept to load a specific image? https://codepen.io/anon/pen/qYXexG <div id="gallery"> <div id="panel"> <img ...

javascripthtmlcss