CODEWITHSUNDEEP
javascriptcssangularangular-material
Flash
Flash

Reputation: 1014

Change width and height of mat-expansion indicator

I am trying to change the width and height of the mat indicator. According to other answers to similar questions all you have to do is change the border width and padding. However it works when I use the console inspect mode but in my css the changes are not reflecting. What am I missing: https://stackblitz.com/edit/angular-8yxted?file=styles.css

.mat-expansion-indicator::after {
  border-style: solid;
  border-width: 0 5px 5px 0 !important;
  content: '' !important;
  padding: 5px;
}

Upvotes: 0

Views: 977

Answers (2)

Marco Aurélio Alves Puton
Marco Aurélio Alves Puton

Reputation: 66

Looks like your css is not being used. I know it's deprecated, but have you tryed using ::ng-deep?

::ng-deep .mat-expansion-indicator::after {
  border-style: solid;
  border-width: 0 5px 5px 0 !important;
  content: '' !important;
  padding: 5px;
}

Upvotes: 1

user2216584
user2216584

Reputation: 5612

Did you put your style in "style.css" file? It should work if you put your updated style "style.css" file.

.mat-expansion-indicator::after {
  border-style: solid;
  border-width: 0 5px 5px 0 !important;
  content: '' !important;
  padding: 5px;
}

See the updated stackblitz - https://stackblitz.com/edit/angular-8yxted-uvnyat?file=styles.css

Upvotes: 0

Related Questions