Ways to modify the height of a row within a mat-table

My goal is to enhance the appearance of a hovered row in mat-table by adjusting the elevation to a <tr> on hover. However, I am facing an issue where the shadow effect that represents the elevation is not displaying at the bottom side of the row, even though it is visible for the top, left, and right sides.

.html

<div class="mat-elevation-z2" #TABLE>
      <table mat-table [dataSource]="dataSource" matSort>

    <!-- Required Columns... -->

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; let e = index; columns: columnsToDisplay;"
          (mouseover)="onMouseOver(e)" [ngClass] = "{'mat-elevation-z24' : e == mouseOverIndex}"></tr>
      </table>
    </div>

.ts

 mouseOverIndex = -1;

public onMouseOver(index) {
    this.mouseOverIndex = index;
  }

.css

.mat-row:hover {
  cursor: pointer;
}

What could be causing this issue?

I have attempted to use 'z24', 'z16', 'z8' etc but without success.

cssangularangular7mat-tableangular-material-7

Answer №1

Seems like the drop shadow at the bottom is being overridden by the background: inherit property on the row.

To fix this issue, you can add the following CSS code:

[mat-row].remove-background {
  background: none;
}

Then, apply the class to your row element like this:

<tr mat-row class="remove-background" (mouseover)="onMouseOver(event)">

Check out Stackblitz for a live example:

https://stackblitz.com/edit/angular-ecrvzg?embed=1&file=app/table-basic-example.css

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

Add a <span> element to the header element in the CSS using jQuery

Struggling to add this unique element after a specific css-class on my website powered by Wordpress: <span class="blink">_</span> I'm unable to alter the file structure, but I have the liberty to utilize CSS and jQuery. The chunk of code ...

jqueryhtmlcssappend

Thundercss and @personalized media

After installing lightningcss and configuring the vite config, I defined lightningcss and customMedia as true. import browserslist from "browserslist"; import { browserslistToTargets } from "lightningcss"; return defineConfig({ ...

cssconfigvitemedialighting

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

htmlcss

Identifying the Bootstrap theme of a website

I’m currently working on a website created using Twitter Bootstrap. Does anyone know how I can identify the specific theme that was used? Is there a location within the code where the theme name is typically stored? ...

csstwitter-bootstrapthemestwitter-bootstrap-3

Challenges arise when media queries fail to activate properly

Greetings! I am currently working on enhancing the responsiveness of my webpage using Media Queries. However, I seem to be facing a challenge with the second image not changing as expected when I reduce the browser size. In the HTML, 'top-background- ...

htmlcssreactjsmedia-queries

What is the significance of mobile browsers rendering pages within a virtual "window"?

While browsing a specific webpage, I came across the following statement: Mobile browsers display web pages in a virtual "window" known as the viewport, which is typically wider than the actual screen size. This allows websites to maintain their layout ...

csshtmlmeta-tags

Tips for retaining mat table paginator on the chosen page even after refreshing the page

Utilizing a mat table to display paginated data fetched from my API presents a challenge when the page is refreshed after the user navigates away. Instead of displaying the initial first page, I aim to show the second page. To achieve this, I store the pa ...

angulartypescriptangular-materialangular-material-tablemat-pagination

a Bootstrap 4 element lacking any line-styling

Is it possible to create a link that appears as plain text with no underline, using minimal css? The issue at hand is that the <a> tag defaults to a blue color and adds an underline on hover, making it look like a typical link. I would like it to re ...

cssbootstrap-4

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

javascriptjqueryhtmlcssajax

Navigating with Angular on Tomcat with the integration of Tuckey and Keycloak

My Angular application is hosted on a Tomcat server at the /webclient endpoint, with backend services available at /frontend. To ensure that all paths not containing /frontend are redirected to /webclient/index.html for serving the Angular app, I have imp ...

angularurl-rewritingkeycloakopenid-connect

Is it possible to stack image elements on top of each other without using absolute positioning?

My current dilemma involves stacking images to create a slideshow, but the situation is proving to be more complex than expected. Simply applying position: absolute leads to undesirable results. I am unsure of any alternative solutions at this point. Chec ...

htmlcsscss-position

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...

htmlcssflexboxvuetify.jscolumn-count

Utilizing the jQuery method $('#dividname'), we can add newline characters to a div container

I have added a <div> element to the body of my webpage using $('body').append('<div id="itemInfo"><h2>TEST</h2></div>'); This particular <div> is initially hidden in my CSS. I am then changing the ...

javascriptjqueryhtmlcss

Form-linked Progress Bar

This is a little project I created (for fun and learning purposes, even though it may not be the most optimized solution). If you're interested, here's the link to the code: https://codepen.io/paschos/pen/xxGXMQb I'm currently seeking assi ...

javascripthtmlcssreactjs

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

Eliminate identical values within a view using Angular

Here is some data with duplicated fields that need to be filtered to display only one: "release_dates":[ {"certification":"PG-13","iso_639_1":"","note":"Telluride Film Festival","release_date":"2018-08-31T00:00:00.000Z","type":1}, {"certification":"PG-13 ...

angularangular6angular7angular8themoviedb-api

Troubleshooting: Angular post request encountering 415 error issue

I'm attempting to retrieve the response from the code snippet below, which produces a JSON output. When I try this on the server, I encounter a 415 error and do not receive the response. constructor(private http: HttpClient){} public getReports(pos ...

javascriptangularhttphttp-headersangular-httpclient

Problems with spacing in Slick slider and lazyYT integration

Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem ...

javascriptjqueryhtmlcssslider

Tips for postponing the opening of a CDK overlay

Utilizing the CDK Overlay, a "popover" is displayed when a user hovers over an item in a list. Currently, the popover opens upon triggering the mouseenter event. Here is the code snippet: //component.html <mat-list-item *ngFor="let item of itemList" ( ...

javascriptangulartypescriptangular-materialangular-cdk

The warning message is thrown when trying to bind to 'style.grid' because the style value is being sanitized as unsafe

I am in the process of developing a system to define and calculate my own reusable grids. Here is an example of the output: [left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-star ...

csstypescriptangular5css-grid