подменю обрезается, когда я применяю прокрутку к главному меню в основном угловом - PullRequest
0 голосов
/ 29 сентября 2019

Я пытаюсь получить прокручиваемое меню с подменю.Я использовал tieredMenu из primeng версии 8 и angular 8. Проблема в том, что подменю скрыто или обрезано, когда я переключаю прокрутку в главное меню.

Вот что у меня есть простой код:https://stackblitz.com/edit/angular-cyvv7d

Для справки: HTML:

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

и css:

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

и файл TypeScript:

import { Component } from '@angular/core';
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'
            }
        ];
    }
}

ОсновнойМеню имеют фиксированную высоту.Я должен добавить свиток.И подменю скрыто при добавлении прокрутки.Как решить эту проблему?

...