CODEWITHSUNDEEP
angularangular-materialangular-cdk
user3154990
user3154990

Reputation: 565

How to disable or overwrite cdk-focused in Angular

I am working on mat-button-toggle-group for which I modified existing css by overwriting mat-button-toggle-checked class like below. Now, when I toggle between buttons the css is not working till I get focus out and that is because 2 cdk classes 'cdk-focused' and 'cdk-program-focused' are being added when the clicked button is on focus . Is there any way that I can make these classes disable or make them not apply or overwrite them with same css of mat-button-toggle-checked?

<mat-button-toggle-group #group="matButtonToggleGroup" value="line">
    <mat-button-toggle (click)="showLine()" value="line">Line</mat-button-toggle>
    <mat-button-toggle (click)="showChart()" value="chart">Chart</mat-button-toggle>
</mat-button-toggle-group>

and css

mat-button-toggle-group {
    border: solid 1px #d1d8de;
    width:260px;
    height:41px;
    text-align: center;
    .mat-button-toggle-checked{
      background-color: #ffffff;
      font-weight: bold;
    }
    .mat-button-toggle{
      width:50%;
      font-size: 15px;
    }
  }

Upvotes: 30

Views: 56513

Answers (15)

Jonatas Rodrigues
Jonatas Rodrigues

Reputation: 67

I had to increase the weight of my selector to be able to attack the element

<button mat-stroked-button (click)="close()" class="close">Cancel</button>

.close {
  border-color: var(--primary-color);
  color: var(--primary-color);

  background-color: #fff;

  &.mat-focus-indicator.mat-stroked-button ::ng-deep span.mat-button-focus-overlay {
    background-color: #fff;
    opacity: 0;
  }
}

Please don't use important.

Upvotes: 0

Oliver
Oliver

Reputation: 581

In my case, the real problem stay in button structure, 'material' build various sub-components and the last one is a 'div' with CSS class 'mat-button-focus-overlay':

My solution is simple, in 'style.css' file, add or subscribe to the 'mat-button-focus-overlay'

.mat-button-focus-overlay { 
background-color: transparent !important; 
}

Upvotes: 11

pinarella
pinarella

Reputation: 885

the cleanest solution is to remove box-shadow:

.mat-raised-button, .mat-flat-button {
  background-color: #4bcd3e;
  color: #ffffff;
  border-color: #4bcd3e;
  box-shadow: none;
}

.mat-raised-button:not([disabled]).cdk-keyboard-focused,
.mat-raised-button:not([disabled]).cdk-program-focused {
  background-color: #41b336;
  border-color: #41b336;
  color: #ffffff;
  box-shadow: none;
}

Upvotes: 0

Marina Nadeyina
Marina Nadeyina

Reputation: 1

For mat-radio-button works:

.mat-radio-button .mat-radio-ripple {
  height: 0px !important;
  width: 0px !important;
}

Upvotes: 0

zsfrancisco
zsfrancisco

Reputation: 1

You can do it if you use sass:

::host {
  &::ng-deep {
    .cdk-program-focused {
      background-color: transparent !important;
    }
  }
}

Upvotes: 0

Franky Orlando
Franky Orlando

Reputation: 21

For cdk focused class as base of the problem use:

.cdk-focused, .cdk-mouse-focused {
  outline: 0 !important;
}

Upvotes: 2

Athul M R
Athul M R

Reputation: 411

The easiest way to get rid of the outline which is created by cdk-focused, cdk-program-focused, cdk-mouse-focused and cdk-touch-focused is by adding 

button:focus { outline: none; }

in your styles.css file

Before enter image description here

After enter image description here

Upvotes: 2

Artemy
Artemy

Reputation: 245

If buttons are contained by a parent mat element, there is an option to disable autofocus with autoFocus @input property of some elements. For example, mat dialog or mat sidenav have it.

Upvotes: 2

Old Fox
Old Fox

Reputation: 8725

I solve this issue with the class css selector of cdk-focused and !important:

.cdk-focused {
  background-color: transparent!important;
}

Upvotes: 1

codenamezero
codenamezero

Reputation: 3079

Simplest "disable" is just to add the following css override to your component.

:host {
  /deep/ .mat-button-toggle-focus-overlay {
    display: none;    
  }
}

Upvotes: 2

Caleb Davenport
Caleb Davenport

Reputation: 623

CSS method for the lazy folks:

.your-elements-class-name:focus {
  outline: 0px solid transparent;
}

Upvotes: 4

James Antony
James Antony

Reputation: 477

You can make use of Angular CDK's FocusMonitor service to disable .cdk-focused and .cdk-program-focused classes by calling the service's stopMonitoring() method.

The documentation for this & the API can be found in the following links respectively:
1) FocusMonitor documentation &
2) FocusMonitor API

The problem I had:

My sidenav had 4 buttons created using *ngFor. Each of these buttons was also a routerLink. Only the button whose router link was active should have primary background color.

Now, this was getting confusing if, say, the routerLink associated with my 4th button was active as the 4th button would have the primary background color and the 1st button had focused styling because of .cdk-focused and .cdk-program-focused classes applied by the FocusMonitor on the button.

The solution:

import { Component, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
    selector   : 'test-component',
    templateUrl: 'test-component.template.html',
})

export class TestComponent implements AfterViewInit {
    constructor(private _focusMonitor: FocusMonitor) {}

    ngAfterViewInit() {
        this._focusMonitor.stopMonitoring(document.getElementById('navButton_1'));
    }
}

You can take a look at the documentations for tailoring this to your need.

Upvotes: 33

Romano
Romano

Reputation: 455

I was facing the same issue using a side-nav component.

After reading the solution provided by Aravind here How to use EventEmitter(onClose) of the sidenav I decided to call the following method:

onSideNavOpened() {
    let buttonsList = document.getElementsByClassName('mat-button');

    for(let currentButton of buttonsList) {
      currentButton.classList.remove("cdk-focused");
      currentButton.classList.remove("cdk-program-focused");
    }
  }

Perhaps you can do more or less the same in your ngOnInit() method for instance?

(For the record, my opening side-nav tag looks like this: <mat-sidenav #snav class="menu-sidenav" mode="over" position="end" opened="false" (open)="onSideNavOpened()"> )

Upvotes: 2

Snackdex
Snackdex

Reputation: 732

Scroll Down to the bold text for answers.

Good practice is to not reference by element but by class when changing the style of an element. For example instead of using:

mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

you would write 

.mat-button-toggle-group {
    border: solid 1px #d1d8de;
}

Again, this is just good practice.

Another thing that is important (no pun intended) is to point out is that you should refrain from using !important. Generally speaking this should be reserved for special edge cases (like printing). This is because it can lead to harder to maintain stylesheets. A good example of where this would be problematic would be wanting to change the border of this:

.mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
}

because the only way to override an !important is with another !important.

Possible Solutions to your Answer

Have a material-theme-overrides.scss file that basically overrides the way classes are styled. This method is ideal when you want all classes to behave this way by default. Like if you want all of your .mat-buttons to have a radius. Material provides a good guide in doing that: https://material.angular.io/guide/theming

Another option Use ::ng-deep this allows you to force a style down to child components. Read more about that here:

How and Where to use ::ng-deep?

Upvotes: 1

jcmordan
jcmordan

Reputation: 1048

Had you tried adding !important to your selector's attributes:

mat-button-toggle-group {
    border: solid 1px #d1d8de !important;
    width:260px !important;
    height:41px !important;
    text-align: center !important;
    .mat-button-toggle-checked{
      background-color: #ffffff !important;
      font-weight: bold !important;
    }
    .mat-button-toggle{
      width:50% !important;
      font-size: 15px !important;
    }
  }

This way your will override the cdk-focused and cdk-program-focused classes.

Upvotes: -1

Related Questions