When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

When I have two ion menus and one main content (router outlet) and resize the page or switch to mobile view, the page appears blank as if the content is missing.

Here is the 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 adjustments can be made to prevent the content from disappearing?

htmlcssangularionic-frameworkmenu

Answer №1

Initially, it seems that both of your menu options are labeled with menuId="first". Consider changing one to menuId="second". Also, ensure you haven't overlooked adding id="main" to the ion-router-outlet. Make these adjustments and give it another shot.

Answer №2

Below is the setup I use for 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 Header
                  </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

I have incorporated particle.js as a background element. By adjusting the z-index, I successfully positioned it in the background. While exploring solutions on the Github issues page, I came across a suggestion involving the z-index and this code snippet: ...

javascripthtmlcssparticle.js

Deactivate a button on a specific tab

My setup includes two tabs: <div class="modal-body"> <form name="myForm" novalidate="novalidate"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> ...

javascriptjqueryhtml

Run a Javascript function two seconds after initiating

My goal is to implement a delay in JavaScript using either setInterval or setTimeout, but I am facing an issue where the primary element is getting removed. Code that works fine without Javascript delay: const selectAllWithAttributeAdStatus = document. ...

javascripthtmljquerycssajax

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Utilize Flexbox to arrange elements in a grid layout based on specified number of columns and rows

My div is currently empty. <div id="container"></div> I have applied the following styling with CSS: #container{ display: flex; position: relative; flex-flow: row wrap; width: 100%; } The goal is to add more divs to the cont ...

javascripthtmlcssflexbox

The footer is being obscured by the sidebar

#contents { width: 1100px; margin-left: auto; margin-right: auto; } #sidebar { padding: 10px; position: sticky; top: 20px; left: 10px; width: 150px; border-right: 1px solid black; float: left; } #main { padding: 15px; margin-left: ...

htmlcss

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

cssdatagridtwitter-bootstrap-3

Trigger a click event to alter the child div elements

I have a <div> that expands when clicked and shrinks back when clicked again. Inside this div are images that should only appear once the div expands. My issue is ensuring that all images except the first one are hidden until the div expands. https: ...

javascripthtmlcss

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

javascriptphpjqueryhtml

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

javascriptjqueryhtmlcssangularjs

The fillFormValues function is not functioning properly within the mat-select element

I need help filling a form value by id. This function successfully retrieves the value: fillFormValues(expenseCategory: ExpenseCategory): void { console.log('response', expenseCategory.parent_category) this.aa= expenseCategory.parent_c ...

angulartypescriptselect

Is it possible to utilize two ngForm elements within the same component in Angular 4?

Currently, I am in the process of creating a settings page that includes both profile update and password update forms. My goal is to have these two different forms within the same component. Is it feasible to integrate two form elements into one compone ...

angularangular2-formsformsangular4-forms

Is there a way to stop PrimeNG Tree onNodeSelect() event from triggering when utilizing templating?

How can I prevent a PrimeNG Tree with templating from selecting/deselecting the node on any click inside the template? Specifically, I want only a click on the <a> element to call doSomething(), not nodeSelected() as well. Here is the code snippet: ...

angularangular2-templateprimeng

JavaScript's setAttribute function is not functioning as expected

I have been using the setAttribue method as shown below. It works perfectly for the first instance, but after that, when I try to change the value, it displays an alert without updating with document.getElementById("to").setAttribute("value", selValue); d ...

javascripthtml

Display the default text using ngx-translate if a key is not found or while the translation file is loading

Currently in the process of setting up a brand new Angular 7 application. I am interested in establishing a default text for translation purposes. Specifically, when utilizing the translation {{ 'wait' | translate }}, I would like to ensure that ...

angulartypescripttranslationngx-translate

Attempting to achieve the simultaneous display of an image overlay and image zoom when hovering over the mouse

I'm struggling to display an image overlay and image zoom simultaneously when hovering the mouse. After adding the image zoom effect, the overlay disappears. It seems like one transition is overriding the other. Whenever the zoom works, the overlay do ...

htmlcssimagetransition

Adjusting the transparency of the background without altering its colors

I need help figuring out how to merge custom palettes I've created such as this one, which resulted in a .css and .less file. While I want to retain the colors, I also require certain elements' backgrounds to be transparent. To achieve this, I c ...

htmlcsstwitter-bootstrap

Encountered an error while attempting to load http://localhost:9999/auth-service/oauth/token: The response for preflight request returned an unexpected HTTP status code

When attempting to generate an OAuth2 token, I utilized Spring Boot OAuth2 and Angular 5. In Postman and curl, I successfully generated the token by providing the appropriate values. However, when using the same parameters in the Angular POST request, it ...

angularspring-bootoauth-2.0

Custom Line-height Mixin for Styling Efficiency

I'm currently utilizing a certain mixin to create font sizes in rem with fallback pixel values, while also determining a line-height that is 1.5 times the font size. .font(@size: 16px, @line: @size) { @remfont: (@size / 10); @remline: (@size / 10) * ...

cssless

JavaScript Enigma: Instantiate 2 Date variables with identical values, yet they ultimately display distinct dates on the calendar

I need some help understanding something in my screenshot. Although both tmpStart and itemDate have been assigned the same numeric value, they display different calendar dates. start = 1490683782833 -> tmpStart = "Sun Mar 26 2017 16:51:55 GMT+ ...

javascriptangulartypescript