Ion-menu with header and scroll list items

Hi, i have the following screen :

In some devices, the height screen doesn’t show all items in my ion-menu list, so in want to generate a ion-list scrolled but keep the header always static, there si some standard way to do that ?


<ion-menu [content]="content" persistent="true" id="menu1">

    <div style="height:100%;">
      <div style="height:20%;">
        <ion-thumbnail class='mtitle' item-start style="z-index:999999;margin-top: 5%; height:120px;width:100%;">
          <img src="./assets/imgs/eliteadmin-logo.png" style="height: 100%;width: 100%;">
      <div style="height:80%;margin-top: 10%;background: #1370a7;">

        <ion-list style="background: #1370a7;margin:0;">
          <button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of mainmenus" (click)="openPage(p)">
            <!-- <ion-icon name="ios-arrow-forward" style="color:#fff;font-size: 2rem;" item-right></ion-icon> -->

        <ion-list style="background: #1370a7;margin:0;">
          <ion-item text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" style="margin: 0;color: #fff;background-color: transparent;padding-right: 0px;">
            <ion-row style="border-top: 1px solid;"> 
              <ion-col col-11 style="line-height: 2;font-size: 16px;">Master</ion-col>
              <ion-col col-1 *ngIf="sublevel" style="line-height: 2.5;"><ion-icon color="success" style="margin-top: 0px;font-size: 2rem;" item-right [name]="isGroupShown(i) ? 'ios-arrow-down-outline' : 'ios-arrow-forward'"></ion-icon></ion-col>
            <ion-row *ngIf="isGroupShown(i)">
              <ion-list style="background: #1370a7;width: 100%;">
                <button style="background: transparent;color: #fff;" menuClose ion-item *ngFor="let p of submenus" (click)="openPage(p)">



submenus: Array<{title: string, component: any}>;
mainmenus: Array<{title: string, component: any}>;
shownGroup = null;

in constructor - 
this.mainmenus = [ 
     //main menu-list
this.submenus = [ 
    //child menu-list
];Preformatted text
1 Like

works like charm, thanks!

1 Like