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

What sets apart "activate" from "ngOnInit"?

I came across this example on the Angular 2 Style Guide website. In my implementation, I would invoke this.show(); within the ngOnInit method, whereas in the demonstration it is called in the activate method. Could someone please explain the distinction ...

typescriptangular

Is the column-fill property malfunctioning in Chrome?

column-fill: balance; is said to "equally divide content between columns". It appears to be functioning correctly in Firefox and Edge. However, Chrome (and Opera) seem to have a strong aversion to the second column, leaving it mostly empty. It seems to be ...

cssgoogle-chromecss-multicolumn-layout

Combining dropdowns, nav-pills, and separate links in Bootstrap 4 to create a seamless horizontal layout

Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link. Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/16 ...

csshtmlbootstrap-4

Using a for loop in JavaScript to fetch and display a specified number of results from an API

Recently, I delved into the world of Javascript and API arrays to grasp the concept of retrieving and manipulating various APIs. The topic of Javascript loops and arrays has been discussed numerous times, both here on StackOverflow and on other platforms. ...

javascripthtmlcssarraysfor-loop

An error occurred: The property 'toUpperCase' cannot be read of an undefined Observable in an uncaught TypeError

Encountering an issue during the development of a mobile app using the ionic framework for a movie application. After finding an example on Github, I attempted to integrate certain functions and designs into my project. The problem arises with the 'S ...

angulartypescriptionic-frameworkmobile

Utilizing the RxJs map operator to update the attributes of multiple objects within an Angular collection

Inside my angular component, I have the following properties: memberInfoLists$: Observable<MemberInfo[]>; total$: Observable<number>; memberPhotoUrl: string = environment.memberPhotoUrl; memberDefaultPhoto: string = environment.defaultPersonPho ...

angularrxjsrxjs-observablesrxjs-pipeable-operators

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss

When the cursor hovers, a drop-down menu appears simultaneously

Currently utilizing the Bigcommerce stencil theme, I have encountered an issue where both dropdown menus appear when I hover over a link. My goal is to have only one dropdown menu pop up when hovering over a specific link. https://i.sstatic.net/paVoY.png ...

javascriptcssbigcommercestencil-compiler

Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one. Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome. The goal is to ...

htmlcssbootstrap-4flexbox

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using fxFlex.lg="30" fxFlex.xl="50": <div class="project-test__element" *ngIf="myCondition()" ...

htmlcssangular

Tips for resizing user-uploaded images to fit the required dimensions outlined in the design draft using CSS or JavaScript

Hey everyone! I'm facing an issue but my English isn't great. I'll do my best to explain it thoroughly, and if anything is unclear, please feel free to let me know! So here's the problem: today there's a block for users to upload p ...

javascriptcss

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api

Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to a ...

htmlcssclip-pathborder-radius

Switching Styles in React applications

I am currently developing a React application and I have multiple stylesheets to restyle the same elements. For the purpose of this query, let's assume that I have two stylesheets with identical elements but different styles. Presently, in my app, I i ...

cssreactjs

What is the best way to create divs that can close and hide themselves when clicked from inside the div itself?

I have a situation in my code where clicking a link reveals a div, and then the same link must be clicked again to hide it. However, I want to modify this so that any link within the div can also hide it when clicked. I currently have eight divs set up lik ...

javascriptjquerycsshtmlshow-hide

Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes: <img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img> The data-small image has ...

javascripthtmlcss

Locate the parent element that has the smallest amount of space taken up by its child elements

My goal is to determine which container, among several <divs>, each containing multiple child <divs> of varying sizes, has the smallest amount of space covered by the child elements. <div class="container" id="first"> ...

javascripthtmlcss

Tips for transferring an excel file to a C# controller from Angular 4 within Visual Studio 2017

I'm working on a web application where I need to import an Excel file and send it to the server-side controller. On the server-side, I am utilizing EPPlus for this task. Can anyone provide guidance on how to accomplish this? I would greatly appreci ...

excelangulartypescriptvisual-studio-2017epplus

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...

javascriptangulartypescriptangular-materialangular-material2

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

javascriptarraysjsonangular