ionic-framework: bug: SplitPane not working when Menu is wrapped in a Component

Bug Report

When wrappen the menu inside a SpliePane in it’s own component (e.g. <my-menu>) the SplitPane is not working as expected (2 Panes are shown)

Ionic version:

[x] 5.x latest

Current behavior:

When wrapping the menu inside a SplitPane in it’s own component (e.g. <my-menu>) 2 Panes are shwon

Expected behavior:

The SplitPane should work as if i would put the <ion-menu> right underneath the SplitPane

Steps to reproduce:

Related code: not working:

<ion-split-pane when="xl" contentId="main">
  <my-menu></my-menu>

  <ion-router-outlet main id="main"></ion-router-outlet>
</ion-split-pane>

working:

<ion-split-pane when="xl" contentId="main">
  <ion-menu>...</ion-menu>

  <ion-router-outlet main id="main"></ion-router-outlet>
</ion-split-pane>

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 16 (5 by maintainers)

Commits related to this issue

fix(menu): menu can be encapsulated in a component (#28801) Issue number: resolves #16304, resolves #20681 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue.... — committed to ionic-team/ionic-framework by liamdebeasi 6 months ago

Most upvoted comments

Bug is still there in “@ionic/angular”: “^6.1.4”. Is there any update/progress on this subject? It is impossible to wrap split-pane/menu logic in separate components

MRDNZ on Jan 3, 2023

This bug is still happening as of 5.6.3 for @ionic/vue

<IonSplitPane content-id="main-content">
     <Sidebar />
     <ion-router-outlet id="main-content" ></ion-router-outlet>
</IonSplitPane>

so the temporary work around is

ion-menu {
  display: flex;
  flex-shrink: 0;
}

jbagaresgaray on Apr 7, 2021