Ion-menu with header and scroll list items

Ionic Framework ionic-v3
1

Hi, i have the following screen :

image
image.png281×630 21.3 KB

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 ?

2 
//app.html----

<ion-menu [content]="content" persistent="true" id="menu1">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <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%;">
        </ion-thumbnail>
      </div> 
      <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)">
            {{p.title}}
            <!-- <ion-icon name="ios-arrow-forward" style="color:#fff;font-size: 2rem;" item-right></ion-icon> -->
          </button>
        </ion-list>

        <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>
            <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)">
                  {{p.title}}
                </button>
              </ion-list>
            </ion-row>
          </ion-item>
        </ion-list>        

      </div>
    </div>    
  </ion-content>
</ion-menu>

//app_component.ts--------

variables-
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
3

works like charm, thanks!

1 Like