Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug(v4-menu): Menu: must have a "content" element to listen for drag events on.

See original GitHub issue

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\amitm\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v10.1.0 (C:\Program Files\nodejs\node.exe)
   npm    : 5.3.0
   OS     : Windows 10

Describe the Bug When putting the menu inside a custom component, (app-menu) to make the app component less busy, I get the following error:

Menu: must have a “content” element to listen for drag events on.

Even though I am passing a [content] input containing element ref for ion-router-outlet

The menu icon doesn’t show anymore.

Steps to Reproduce

Generate a new app with menu
ionic g component menu
Put the ion-menu in the app-menu
Put the following in app.component:

<ion-app>
  <ion-split-pane>
    <app-menu [content]="content"></app-menu>
    <ion-router-outlet #content main [swipeBackEnabled]="true"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Expected Behavior Menu to show, no error to apear

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

GuilhermeBCCcommented, Sep 10, 2018

ion-menu has the contentId property, try switching to <ion-router-outlet id="content1" .. and <ion-menu contentId="content1" ..

ion-menu will look in the document

? document.getElementById(this.contentId)

in menu.tsx#L149

1reaction

paulstelzercommented, Dec 14, 2018

Since beta.18 the following is correct:

<ion-split-pane contentId="menu-content">
  <!--  our side menu  -->
  <ion-menu contentId="menu-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-split-pane>

See: https://github.com/ionic-team/ionic/blob/master/core/src/components/split-pane/readme.md

PS: But you can still use main in ion-router-outlet 😉