Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved.

However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of displaying a vertical scrollbar as expected.

I attempted to address this issue by setting a max-height for the mat-menu-item with overflow: auto, but this solution did not work.

This is how it currently appears:

https://i.sstatic.net/EjjWU.png

Here is the snippet of my HTML and CSS:

        <mat-menu #emailOptionsMenu="matMenu" xPosition="before">
            <div class="dropdown_item" *ngFor="let user of filteredUsers">
                {{user}}
            </div>
        </mat-menu>

.dropdown_item {
    padding: 6px 20px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

What steps should I take to resolve this issue?

cssangularangular-material

Answer №1

Include the following code snippet in your CSS file

::ng-deep .mat-menu-content{
  max-height: 400px;
  overflow: auto;
}

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

Firefox does not display the line headings on the sides

Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...

css

Incorporating and utilizing the HTML5-captured image as a point of reference

I understand that all I need to do to achieve this is insert <input type="file" id="photo" accept="image/*;capture=camera"> However, my lack of coding skills has caused issues with actually grabbing and using the image selected/taken by the user. ...

javascriptcsshtmlimage

What makes @font-face function on Safari but not on Firefox in Mac versions?

Can anyone help me troubleshoot a font issue on my website? I've added the following code to the CSS file, and it's working fine in Safari, but not in Firefox. I'm new to coding, so please bear with me if this seems like a basic question. I& ...

cssfirefoxsafarifont-face

Elements within the DIV tag are not displaying in a linear arrangement as intended

I'm having trouble creating a navbar with Bootstrap 4. The items in my div tag are not inline, and I can't align my nav item to the right. Here is the HTML code: <nav class="navbar navbar-inverse "> <div style="display:inline"> ...

htmlcsstwitter-bootstrapbootstrap-4

Update the icon in real-time based on the text with Angular 8 and Font Awesome, achieving dynamic changes effortlessly

I need to dynamically change the icon based on the value within a span element. Here is the HTML structure: The version text will only have two possible values: If the value is "Active", then a success icon should be displayed. If the value is "Inactive ...

angularfont-awesomeangular8

Sending data with an Http POST request in Angular 2

I'm having difficulty with a POST request that I am trying to make: sendRequest() { var body = 'username=myusername&password=mypassword'; var headers = new Headers(); headers.append('Content-Type', 'applicat ...

typescriptangular

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

htmlcss

Tips for modifying the icon of a div with a click event using vanilla JavaScript

My goal is to create a functionality where clicking on a title will reveal content and change the icon next to the title. The concept is to have a plus sign initially, and upon clicking, the content becomes visible and the icon changes to a minus sign. C ...

javascripthtmlcsssass

Background image changing due to React re-render

I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried usi ...

cssreactjs

Ways to retrieve the initial value and proceed with a subsequent subscription method

I have created a basic angular 7 web application with Firebase database integration. In my code, I am attempting to store the initial list in an array using the subscribe method and then display that array using console.log(). However, there seems to be a ...

javascriptangularangularfire2

Changing the color of text in one div by hovering over a child div will not affect the

When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change. .carousel-slide { position: relative; width: inherit; .carousel-buttons { position: absolute; z-index: ...

htmlcsssass

Error handling in Angular is not properly managing the custom exception being thrown

I am currently working on an Angular 12 application and I have a requirement to implement a custom ErrorHandler for handling errors globally. When I receive an error notification from the backend, I subscribe to it in the ToolService using this.notificati ...

javascriptangulartypescript

Sending multiple text fields along with a file to an API using Angular

I'm currently facing a challenge with uploading a file to an API endpoint that I created using Laravel, using an HTML form. The upload works fine when only the file is involved. However, I also need to include some basic text fields in the request. T ...

angularapifile-upload

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

One issue that arises when using TextareaAutosize from MUI is the need to click on the textarea again after entering each character. This problem specifically occurs when utilizing StyledTextarea = styled(TextareaAutosize) The initial code snippet accompl ...

javascriptcssreactjsmaterial-uistyled-components

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

I've been searching for a solution to this question without any luck. Here is the tag I'm working with: <input type="text" id="userText" class="userTextBox"> And here is my CSS: .userTextBox { /* Add marg ...

htmlcssinput

Striving to convert Celsius to Fahrenheit using ReactJS

I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation. return ( <div className="app& ...

cssreactjs

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

Background with funky Font Awesome colors

Font Awesome is working perfectly for me, but I'm experiencing an issue with strange borders appearing around the icons in Chrome. Interestingly, this problem doesn't occur in IE and Firefox browsers. What's even more peculiar is that the bo ...

htmlcsstwitter-bootstrapfont-awesome

Expanding text area size dynamically in Nuxt3 using Tailwind CSS

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

cssvue.jstailwind-cssnuxtjs3tailwind-ui

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4