The PrimeNG SubMenu cuts off when scrolling in Angular with PrimeNG

I am facing an issue where the submenu gets cut off when I add a scroll to the main menu, and I'm struggling to make the submenus appear above the scroll. Any assistance would be highly appreciated.

Here is a simple code snippet: https://stackblitz.com/edit/angular-cyvv7d

Any guidance on how to resolve this problem?

To provide more context, below are the HTML code:

 <div class="scroll-width-perso">
    <p-tieredMenu [model]="items"></p-tieredMenu>
  </div>

CSS styling:

.app-scroll-perso {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 250px;
}

and TypeScript implementation:

import {MenuItem} from 'primeng/api';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'test menu with scroll';


   items: MenuItem[];

   ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'},
                    {label: 'save', icon: 'pi pi-fw pi-refresh'},
                    {label: 'modify', icon: 'pi pi-fw pi-refresh'},
                    {label: 'nothing', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'encouragment',
                icon: 'pi pi-briefcase'
            },
            {
                label: 'primeng',
                icon: 'pi pi-save'
            },
            {
                label: 'contact',
                icon: 'pi pi-cloud-upload'
            },
            {
                label: 'Edit',
                icon: 'pi pi-tags'
            },
            {
                label: 'user',
                icon: 'pi pi-user',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'},
                    {label: 'save', icon: 'pi pi-fw pi-refresh'},
                    {label: 'modify', icon: 'pi pi-fw pi-refresh'},
                    {label: 'nothing', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'blog',
                icon: 'pi pi-fw pi-pencil'
            }
        ];
    }
}

Answer №1

Consider using the following code snippet:

.custom-scroll {
 max-height: 30vh;
 overflow-y: auto;
 overflow-x: hidden;
 width: 400px;
}

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

Obtaining rotate3d values using JavaScript / jQuery

When dealing with an element that has a transformation like the following: style="transform: rotate3d(1, 0, 0, -50deg);" I am looking to extract the value -50 using Javascript or jQuery. It's essential for me to get the absolute value, so negative d ...

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

A button that is positioned with a low z-index may be unresponsive to

I am working on aligning an image and a button next to each other so that the image slightly overlaps the button. However, I have noticed that in doing so, the button becomes unclickable. .button{z-index:-1!important;} .image{z-index:1!important;} Any s ...

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

Issues with implementing Bootstrap icons in Angular are hindering functionality

As a beginner in Angular, I am currently working on creating a simple website using Angular and a Bootstrap template. However, I have encountered many issues along the way. Right now, I am struggling to utilize Bootstrap icons in my project. It appears tha ...

The span element remains the same width even with the display property set to flex

How can I center a span element within a container div when the span is preceded by another div? Here's my current code: <div id="container"> <div id="a">A</div> <span id="b">B</span> </div> #container { ...

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

I am developing the frontend of my application using a combination of bootstrap, react, and nextjs. I attempted to implement the example provided by react-bootstrap at https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. ...

Emphasize the text based on the content in Angular

database of customers check customer records customer service module access service details component for user details display view user details component 1 view user details component 2 template file for user details component see HTML template Seek ...

Upgrading from Angular 10 to 13 resulted in an error that required adding 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'. Although this fix was implemented, the issue still persists and the application remains broken

Here are a few examples of errors: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurred in the template of component ShochatactivestreamviewShellComponent. Error: src/app/money_makers/shochat_guts/shochat_content_creato ...

Position the Bootstrap button at the bottom left with absolute placement

Currently, I am utilizing Django as my web framework and Bootstrap to enhance the rendering of the frontend. My goal is to implement an "add" button on my page that will always be in the bottom left corner regardless of scrolling, overlaying any other cont ...

Acquiring the height of the div

I am trying to achieve a specific layout for my webpage. My goal is to make the background color of the red div match the height of the combined heights of the divs with heights 15.56 + 77.33 + 73.33. <body> <!-- outer div --> <div ...

What steps can I take to achieve complete code coverage in my unit testing for this component and also ensure that the 'else' part is being

I am struggling to figure out how to access the remaining line of code in order to achieve full code coverage. Simply checking if the function has been called (toHaveBeenCalled()) will suffice. Here is a snippet from my TypeScript file and Spec file, alon ...

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

Having difficulty generating the appropriate output for ng-new app

I am facing difficulty in generating the Angular app after running the 'ng new my-app' command. Here are the outputs I receive upon running the command - 1 Executing 'ng new-mean' app https://i.sstatic.net/UaTQe.png 2 After choosing ...

When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here. I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with t ...

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

Struggling to Achieve Consistent Design Across Different Browsers When Styling a Calendar

My webpage has a calendar that retrieves data from the server using Jquery. Interestingly, the calendar looks perfect on Google Chrome but falls apart on Firefox. I can't seem to style it to make it look consistent across different browsers like in C ...

Avoiding repetitive logic in both parent and child components in Angular 8

In my parent controller, I have common requests and I also read router params for those requests. However, for the child components, I have different requests but still need to extract the same parameters from the router - resulting in duplicate code. For ...

Incorporating various vertical divs with 100% height and width

Struggling to achieve the creation of multiple divs with 100% width and height? Here is an example: <html> <body> <div id="wrapper"> <div id="1">100% height & width, all you can see when opening this file!</div&g ...

The CSS hover effect is not being implemented correctly. Can you identify the specific issue that is causing this problem?

I am working on creating a dynamic Search List for the Search Bar that changes color when hovered over and gets selected when clicked from the displayed item list. searchlist.jsx: import React from 'react' import { FaSearch } from 'react-ic ...