PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 19, 2022

[FIXED] Why are my Angular Material buttons and links being underlined/outlined?

 November 19, 2022     angular, angular-material2, bootstrap-4     No comments   

Issue

I am experiencing some strange outlining after clicking a button that uses any of the variations of mat-button from Angular Material as well as link tags being underlined when I hover the mouse over them.

Button oulining after the button is clicked.

Link underlining when mouse hovering.

I'm using Angular 6, Angular Material and also a little of Bootstrap 4. The code for the images above is simply this:

<div class="container">
    <div class="row">
        <h1>Hello</h1>
    </div>
    <div class="row">
        <button mat-raised-button>Click me!</button>
        <a mat-button>Click me too!</a>
    </div>
</div>

Solution

While posting the question, I found out that the problem was Bootstrap, but I decided to post the question either way as a way to document this behavior.

In order to fix this, either remove Bootstrap or follow what is described here. The solution is described when the author of the post creates two Sass partials _variables.scss and _reset.scss.

There is also another good guide on using Bootstrap and Angular Material here.



Answered By - vamcs
Answer Checked By - Willingham (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing