'When i resize the window using the <ion-split-pane>, the content disapears (menu and router outlet)

I have two ion menus and one main content(router outlet). And when i resize the page or place it on moblie view, i get a blank page, like the content is missing.

code:

<ion-app>
  <ion-split-pane>

    <ion-menu side="start" menuId="first" contentId="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-menu side="end" menuId="first" contentId="main">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
          <ion-item>Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

  <ion-router-outlet></ion-router-outlet>

  </ion-split-pane>
</ion-app>

What can i add or do to make the content not disapear?

htmlcssangularionic-frameworkmenu


Solution 1:[1]

First of all, both your menus have the same menuId="first". make one of them menuId="second". I think you missed id="main" for ion-router-outlet too. fix these things and try again.

Solution 2:[2]

Here's what works for me in Angular 13 and Ionic 6

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu side="start" menuId="start" contentId="main-content" type="overlay">
      <ion-content>
        <ion-grid class="ion-no-padding">
          <ion-row class="ion-no-padding">
            <ion-col size="12" class="ion-no-padding">
              <ion-item class="transparent header" lines="none">
                <ion-label class="ion-text-start">
                  <h2 class="text-size-lg font-bold text-color-primary ion-text-wrap padding-half-bottom">
                    Left Menu Title
                  </h2>
                  <h3 clas="text-size-xs font-regular text-color-primary ion-text-wrap">
                    Left Menu Subtitle
                  </h3>
                </ion-label>
              </ion-item>
              <ion-list class="ion-no-padding">
                <ion-menu-toggle translate auto-hide="false" *ngFor="let pageModel of startMenuPageModels">
                  <ion-item lines="none" class="border-radius box-shadow ion-margin" [routerDirection]="'root'" (click)="openPage(pageModel)">
                    <i slot="start" class="{{pageModel.icon}} icon-font-md icon-color-primary"></i>
                    <ion-label class="text-size-xs font-bold text-color-primary">
                      {{pageModel.title}}
                    </ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </ion-list>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
    </ion-menu>
    <ion-menu side="end" menuId="end" contentId="main-content" type="overlay">
      <ion-content>
        <ion-grid class="ion-no-padding">
          <ion-row class="ion-no-padding">
            <ion-col size="12" class="ion-no-padding">
              <ion-item class="transparent header" lines="none">
                <ion-label class="ion-text-start">
                  <h2 class="text-size-lg font-bold text-color-primary ion-text-wrap padding-half-bottom">
                    Right Menu Title
                  </h2>
                  <h3 clas="text-size-xs font-regular text-color-primary ion-text-wrap">
                    Right Menu Subtitle
                  </h3>
                </ion-label>
              </ion-item>
              <ion-list class="ion-no-padding">
                <ion-menu-toggle translate auto-hide="false" *ngFor="let pageModel of startMenuPageModels">
                  <ion-item lines="none" class="border-radius box-shadow ion-margin" [routerDirection]="'root'" (click)="openPage(pageModel)">
                    <i slot="start" class="{{pageModel.icon}} icon-font-md icon-color-primary"></i>
                    <ion-label class="text-size-xs font-bold text-color-primary">
                      {{pageModel.title}}
                    </ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </ion-list>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mahdi Zarei
Solution 2 Chris Sprague

Related Questions