question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-button-toggle styling issues

See original GitHub issue

Bug 1:

Issue

Applying custom style for checked button toggle gives an odd hover effect.

eg.

.mat-button-toggle-checked{
  background-color: #2979FF;
  color: white;
} 

button-toggle-bug

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ivjb9g

Bug 2:

Issue

In legacy style, button elevation cannot be modified.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ivjb9g-tdqden

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:6

github_iconTop GitHub Comments

14reactions
blogcraftcommented, Jan 4, 2021

I find mat-button-toggle the worst component of Angular Material.

0reactions
angular-automatic-lock-bot[bot]commented, Mar 23, 2022

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - How to set color of toggle buttons - Stack Overflow
You can use the css classes .mat-button-toggle and .mat-button-toggle-checked to style the different states. With material theming you can ...
Read more >
Mat Button Toggle Issue Working - StackBlitz
Basic button-toggles.
Read more >
How can I style my mat-button-toggle-group : r/Angular2 - Reddit
Hello guys! I want to have a form where you can select from different emotes. I wanted to implement it with mat-button-toggle-group.
Read more >
Monthly Archives: August 2018 - Alternate Stack
In this post we are going to create an Angular App to use Button toggle ... You can add global styles to this...
Read more >
Button - Angular Material
Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found