constant element within mat-menu in Angular

This coding snippet displays unread notifications to users:

<mat-menu #menu="matMenu">
    <div class="menu-item" mat-menu-item *ngFor="let item of notifications">
        ...item content
    </div>
    <button class="show-all-btn" mat-menu-item (click)="navigateToNotification()">show all</button>
</mat-menu>

In the code above, menu items are generated using the *ngFor directive. The "show all" button is always displayed as the last item in the menu. How can I ensure that this button remains fixed at the bottom of the mat-menu and does not scroll up with the other items?

cssangularangular-material

Answer №1

To achieve this effect, I recommend using the position sticky property with the following required styles:

.menu {
  position: relative;
}

.sticky {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 1;
}

Check out this Stackblitz example for a demonstration.

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

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

csscss-selectors

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

The Dev Tool is perfectly displaying the JSON response, yet it remains hidden from view on browsers, Postman, Python requests

https://i.stack.imgur.com/xTWnj.png Should this question be labeled as silly? Because I'm feeling a bit foolish ...

jsonangularxmlhttprequestcloudflarefirefox-developer-tools

I am looking to integrate my information into the user interface using Angular

import { Component, ViewEncapsulation } from '@angular/core'; import { Router } from '@angular/router'; import { Batch } from '../../../config/batchnew/batch.model'; import { BatchService } from '../../../config/batchnew ...

javascripthtmlangulartypescript

Using div tags may cause rendering issues

I am trying to use multiple div tags with webkit borders, but for some reason only the one called 'Wrapper' is displaying properly. Here is my code: .wrapper { margin: 20px auto 20px auto; width: 800px; background: url('images/background_1. ...

csshtmltags

Unable to bring in a personalized npm package using its package title

Currently, I am loosely following a tutorial on creating an angular npm package named customlib. This package is intended for managing dependencies across my projects without the need to make them public on npm. The tutorial can be found here. However, I ...

angulartypescriptnpm

How to Ensure an Absolutely Positioned Element Occupies the Full Width of its Container

My main content area has a sidebar positioned absolutely to the right side due to various reasons. However, I am facing an issue where if the main content area is shorter, the sidebar extends beyond the content. Do you know of any CSS technique that can h ...

htmlcsslayout

White border appears when hovering over MUI TextField

I've been troubleshooting this issue for what seems like an eternity. I've combed through Chrome's inspect tool, searching for any hover styles on the fieldset element, but to no avail. Here's my dilemma... I simply want a basic outline ...

javascriptcssreactjsmaterial-ui

Uncomplicating RxJs Operators: Decoding switchMap and combineLatest

I currently have the following RxJS subscription : combineLatest([obs1$, obs2$]) .pipe( filter(val=>!!val[0] && !!val[1]), // ensuring no null values on both observables switchMap(([val1, val2]) => combineLatest([of(v1), getObs3$( ...

angulartypescriptrxjsreactiverxjs-pipeable-operators

What are the steps for launching an Angular, Node.js, and MySQL web application on Heroku?

My back-end server is built using Node.js (Express) with a front-end powered by Angular 4 that consumes the back-end APIs. I am using MySQL as the database for this project. The folder structure of my back-end Node.js server looks something like this: I a ...

mysqlnode.jsangularherokudeployment

The error message "InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' in Angular 6 and Firebase" indicates a problem with the data being passed to the AsyncPipe in

**Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'. ** I am encountering a problem with unsubscribing from the observable. My Angular-cli version is 6.0.3 This is the HTML code in home.component.html <div class ...

angularfirebaserxjsangular6

Ionic - Smooth horizontal tab scrolling for sorted categories

Currently, we are developing a web/mobile application that includes horizontal scroll tabs to represent Categories. While this feature works well on mobile devices, it requires additional functionality for web browsers. Specifically, we need to add two arr ...

angulartypescriptionic-frameworkionic2ionic3

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

This error is really frustrating and I've come across several inquiries regarding this console issue. It's not providing enough information in the chrome console for me to effectively troubleshoot. /** * Adjustment of dropdown menu positio ...

javascriptjquerycssconsole.log

Are you familiar with Mozilla's guide on combining strings using a delimiter in Angular2+?

I found myself in need of concatenating multiple string arguments with a specific delimiter, so after searching online, I stumbled upon a helpful guide on Mozilla's website that taught me how to achieve this using the arguments object. function myCo ...

javascriptangulartypescript

Discovering elements with multiple classes using watir-webdriver

In this scenario, let's consider an element like the one below: <div class="first_class second_class"></div> Now, we can locate it by its classes using the following methods: browser.div(class: 'first_class') browser.div(class ...

htmlcssrubyseleniumwatir-webdriver

Ways to address observables in Angular in a manner similar to deferred objects

Transitioning from AngularJS to Angular has posed a challenge for me, especially when it comes to moving from promises to observables. Below is an example of my code in AngularJS: var deferred = $q.defer(), frame = document.createElement('newFrame ...

javascriptangulartypescriptrxjs

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

javascripthtmlcss

Issue with primeng dropdown not displaying the selected label

When using the editable dropdown with filter feature from PrimeFaces, I've noticed that selecting an option displays the value instead of the label. Here is the code snippet: <div class="col-md-5 col-xs-12"> <p-dropdown [op ...

javascriptangularprimeng

Is it possible to accomplish this using a list or a table in HTML/CSS?

I am currently working on creating a visual representation of a color catalog using hyperlinked images. My goal is to have a layout that displays the colors in a grid format, similar to this: However, the number of images per row may vary depending on the ...

phphtmlmysqlcss