Tips for adjusting the focus effect of mat-icon-button

I am encountering an issue with a button on my page. Here is the code for the button:

<button mat-icon-button color="black" style="height: 21px; bottom: 8px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
   <mat-icon style="line-height: 20px;">playlist_add</mat-icon>
</button>

When I click on the button, the focus is not exactly around the icon as shown in this screenshot. I need to move the focus downwards, but I'm unsure how to do this. Alternatively, removing the focus effect completely could be a solution, but again, I'm unsure of how to achieve that.

htmlcssangular

Answer №1

To modify the focus position of a mat-icon-button, you can apply custom CSS to the pseudo-element ::ng-deep. In order to shift the focus impact lower in your specific scenario, follow these steps:

::ng-deep .mat-icon-button:focus:not(.cdk-focused) {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  outline: none;
}

::ng-deep .mat-icon-button:focus:not(.cdk-focused)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* adjust this value to move the focus effect downwards */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ripple 1s linear;
  z-index: -1;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

By implementing the provided CSS code snippet, the mat-icon-button will showcase a personalized focus effect that displaces the emphasis by 5 pixels downward. You have the flexibility to fine-tune the bottom value in order to adjust the focal impact as needed.

Please note that utilizing ::ng-deep is considered outdated and alternative approaches should be explored for applying styles to child components.

Answer №2

A simple solution was implemented:

        <button mat-icon-button color="black" style="height: 25px; width: 25px; left: 3px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
            <mat-icon style="line-height: 10px;" >playlist_add</mat-icon>
        </button>

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

Initiating external libraries at the right time in Angular 4

I am currently experimenting with a UI kit (you can check it out here) that comes with multiple JavaScript files, jQuery, Bootstrap, and its own components. I have included them in my index.html file and everything works perfectly as long as the checkbox ...

javascriptjqueryhtmltwitter-bootstrapangular

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...

javascripthtmlangularjs

The functionality of adding HTML from one file to another using jQuery is not functioning as expected

I recently started working with jQuery and I came across the .load() function at this link: http://api.jquery.com/load/ I attempted to implement one of their examples, but encountered issues when trying it on my local machine Here is my HTML file: <!d ...

jqueryhtml

AngularJS ng-table with collapsible headers using jQuery accordion

Currently, I am utilizing AngularJS ng-table to showcase specific information. My goal is to have a fixed header with a scroll bar for the ng-table. Additionally, I aim to include an accordion just before the ng-table. However, when I collapse the accordi ...

javascriptjquerycssangularjsslimscroll

Adding a contact form to a slider: A step-by-step guide

Currently, I am faced with the challenge of placing my form on a slider in such a way that the slider appears to be running in the background of the form. When using position absolute, I find myself having to apply excessive margins and top pixels due to t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips on implementing taxonomy-driven CSS styling with Drupal's template.php file?

Currently, I am excited about incorporating CSS styling based on taxonomy terms, particularly for the body tag where I aim to include the current terms. Here is my progress so far : function _phptemplate_variables($hook, $vars = array()) { global $no ...

cssdrupaltaxonomy

Steps for logging in using Spring Boot and Angular 2

My Front End application is built with Angular 2 and runs on http:// localhost:5555. Meanwhile, my Back End application uses Spring Boot and runs on http://localhost:8080/. It provides a REST API for my Angular 2 application. Sending requests from http:/ ...

springrestangular

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Is there a way to hide the horizontal lines and timeslots in the table below without affecting the vertical lines? I attempted to use the visibility property on the td elements, but it hides both sets of lines. Any suggestions on how to resolve this is ...

htmlcssreactjsmaterial-ui

I am selecting specific items from a list to display only 4 on my webpage

I am trying to display items from a list but I only want to show 4 out of the 5 available items. Additionally, whenever a new item is added, I want it to appear first on the list, with the older items following behind while excluding the fifth item. Despi ...

javascriptjqueryhtml

Dynamic use of a mixin in LESS allows for greater flexibility in

Is it possible to dynamically call a mixin in Less CSS? An interesting use case could be creating a style guide: // Define the mixin that needs to be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // A mixin att ...

csslessmixins

Creating two div elements next to each other in an HTML file using Django

I'm having trouble arranging multiple divs in a single line on my website. Utilizing float isn't an option for me due to the dynamic number of divs generated by Django posts. Here is the code I am currently using: Index.html <!DOCTYPE html&g ...

pythonhtmlcssdjango

Querying specific documents with Angular Firebase reference is a breeze

I'm currently encountering an issue when attempting to query documents in one collection with a reference to another document in a separate collection. Here is the scenario I am dealing with: There are two collections: "posts" and "users". Every "pos ...

angularfirebaseexpressgoogle-cloud-firestore

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

I am facing a challenge with my website that has a visually appealing jumbotron and an enticing email signup call to action bar. The issue arises from the fact that my site is bilingual, catering to both German and English speakers, causing confusion with ...

htmlresponsive-designtwitter-bootstrap-3

Difference among rows

I am currently working on a table design with 2 rows that have different colors. There seems to be some space between the two rows and I am looking for a way to eliminate that gap. Can anyone provide me with a solution? https://i.stack.imgur.com/8N8Rw.png ...

htmlhtml-table

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. https://i.sstatic.net/DCzWy.jpg After removing the background-size: cover; in the home section, it appears like this: https://i. ...

htmlcss

Creating whimsical freehand drawings using the 'pixie' feature in fabricjs

I am currently working on developing an 'Eraser' tool for my drawing application based on fabric.js. The goal is to create a free drawing app with a 0.5 opacity where the background image remains visible through the drawings. However, I have rea ...

htmlcanvasfabricjs

Troubleshooting problem with nested image carousel in Bootstrap modal

I am working on implementing a modal for displaying an image gallery. The initial modal showcases thumbnails, and upon clicking a thumbnail, a secondary modal should open on top with larger images displayed in a carousel. The issue I'm facing is that ...

htmlcsstwitter-bootstrapmodal-dialogbootstrap-modal

choose the <li> element with no <a> tag

Hello there, I am looking for a way to keep the padding consistent in <li> elements, but have it applied to the <a> tag instead when it's a link (to create a larger selection area). li a { padding: 1rem; } li:not(a) { padding: 1rem ...

htmlcsscss-selectors

How to keep the secondary sidebar menu highlighted even when on the current page

Recently, I made an addition to our website which caused the Top Nav and left-hand menu to remain highlighted. I am specifically hoping to keep "Employee training" on the left-hand side highlighted while on the page. If you check out the other pages in thi ...

cssmenuwebsidebar