Unable to change the color of the tab indicator

Hello, I am currently using materializecss in conjunction with Angular 6. Just to clarify, I am solely utilizing the materializecss library and not ng2-materialize.

My issue arises when attempting to customize the tab indicator background color by modifying the CSS within my component. I have tried using !important as well, but unfortunately, it has not resolved the problem.

<div class="row">
<div class="col s12 m12 l12 xl12">
  <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab" *ngFor="let view of views">
      <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
    </li>
  </ul>
</div>

Below is the snippet of my current CSS code:

.tabs {
    overflow-x: hidden !important;
}
.tabs .indicator {
    background-color: blue !important;
}

Your help is greatly appreciated. Thank you.

cssangularmaterialize

Answer №1

it's altering the color. I am simply utilizing tabs without AngularJS

  $(document).ready(function(){
    $('.tabs').tabs();
  });
  
  
      
 .tabs {
    overflow-x: hidden !important;
}
.tabs .indicator {
    background-color: blue !important;
} 
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


</head>
<body>
<div class="row">
<div class="col s12 m12 l12 xl12">
  <!-- <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab">
      <a href="#tab" (click)="loadTab(view)">okkk</a>
    </li>
  </ul> -->
  
  
<ul class="tabs tabs-fixed-width tab-demo z-depth-1" id="chartstabs">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
    <li class="tab"><a href="#test0">Test 5</a></li>
  </ul>
  <div id="test1" class="col s12"><p>Test 1</p></div>
  <div id="test2" class="col s12"><p>Test 2</p></div>
  <div id="test3" class="col s12"><p>Test 3</p></div>
  <div id="test4" class="col s12"><p>Test 4</p></div>
  <div id="test0" class="col s12"><p>Test 5</p></div>
  
  
</div>

</div>

Answer №2

Kudos to @Sunil Singh for the insight, but it's true that those selectors are outdated. Here's my solution:

Simply include the css rules in a main styles.css file linked to index.html, which will apply the changes globally. To customize the rule for each individual page, consider using ids within each tabs component.

Answer №3

Utilize the /deep/ selector to override the current styles

/deep/ .tabs {
    overflow-x: hidden !important;
}
/deep/ .tabs .indicator {
    background-color: blue !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

Having trouble personalizing the background color according to the ItemName in angular2-multiselect-dropdown

Is it possible to customize the background color in angular2-multiselect-dropdown based on the tags label? I want the background color to be determined by the tags label. The npm package provides no description regarding this feature here https://i.ssta ...

angularnpm

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

Retrieve user data from the backend with the help of Angular and Express

Working on a project with the MEAN stack and encountering a little confusion. I'm able to load a single user from MongoDB without issue, but I'm struggling with loading all users. In my routes file, I have: router.get('/admin, function(req ...

node.jsangularmongodbexpressangular5

"Changing the title using a button or anchor: A step-by-step guide

Is there a way to update the title each time a button is clicked on my one-page site that directs to different anchors at the top? ...

htmlcss

Display real-time information in angular material table segment by segment

I need to incorporate service data into an Angular mat table with specific conditions as outlined below: If the difference between the start date and end date is less than 21 days, display 'dd/mm' between the 'start_date' and 'end ...

javascriptangulartypescriptangular-materialangular-material-table

Displaying an array in an Ionic HTML template without using the *ng

Is there a way to retrieve data from an Array in Ionic 3 without relying on ngFor? Here's an example that currently works: <ion-item-sliding *ngFor="let user of users"> <ion-item> <ion-grid> <ion-row> < ...

angularionic3ngfor

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...

javascriptjquerycss

What is the best way to programmatically generate a service within Angular?

Is there a way to dynamically create services at runtime using a string name (like reflection)? For example: let myService = new window[myClassName](myParams); Alternatively, you could try: let myService = Object.create(window[myClassName].prototype); m ...

angulartypescript

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

Font loading error in Angular 2 - Denied access to load font

Recently, I started experimenting with Angular 2 and delved into working with routes. Surprisingly, everything was functioning seamlessly until I introduced routes into the mix. Now, whenever I navigate to /home, an error pops up. Refused to load the font ...

angularroutes

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

javascripthtmlcssinternet-explorer

Angular error: "name not found", element is not present in the DOM yet

In my current Angular5 project, I am implementing a small chat system. One issue I encountered is that when a user sends a message, a LI element is dynamically created: chat-component.html <li #ChatListItem *ngFor="let message of messages" class="list ...

angulartypescript

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Angular: Attempting to coordinate communication between two functions within my service

I have two separate functions but I would like them to sync up and work together. The first function is called getRandomNumbers - its role is to display a random number between 1 and 20 every second. The second function is up - it's a button that al ...

angular

The missing binding.node file is causing an issue with Node-sass

Previously, my angular project 7.1 was running smoothly until I upgraded to ubuntu 19.10 and encountered an error upon running npm install: > [email protected] install /home/gabb/dev/homepage/node_modules/node-sass > node scripts/install.js Do ...

angularnpmsassnode-sass

Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two d ...

htmlcss

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this? import { Component, HostListener } from '@angular/core' export class TooltipComponent { public sh ...

javascriptangulartypescript

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

javascripthtmlcsshovertailwind-css

Uploading images using Angular and PHP: A comprehensive guide

I am a beginner in Angular and I am having trouble uploading an image from Angular as I encounter 4 errors: 1) Error in the post method: Cannot find name 'formData'. Did you mean 'FormData'?ts(2552) 2) Error in the subscribe method: ...

angulartypescript