Split pane content width

Ionic Framework ionic-v3
1

I don’t kown how i can describe this issue. But when i build my menu page with split pane, i get this screen (a gif image).

How i can solve it ? Also in my page, the header section is not display but i put the button menu tag.

This is a example of my menu html component :

<ion-split-pane>
  <ion-menu contentId="content">

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
 
        <ion-item tappable routerLink="/login" routerDirection="root">
          <ion-icon name="log-out" slot="start"></ion-icon>
          Logout
        </ion-item>
 
      </ion-list>
 
    </ion-content>
 
  </ion-menu>
 
  <ion-router-outlet id="content" main></ion-router-outlet>
 
</ion-split-pane>

This is a example of my page with header section :

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>firstWithTabs</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

error-split-pane
error-split-pane1200×611 103 KB

Regards,

2

I pretty much have the same question/problem on desktop (looks fine on mobile). Using an IonGrid has helped (with the right component with the right column size) but now I’m trying to get the menu to render in the right spot.

3

I have faced the same problem on ionic v5, I fixed the issue by adding “content-id” to the “ion-split-pane”.

<ion-split-pane content-id="content">
  <ion-menu contentId="content" >
  </ion-menu>

  <ion-router-outlet id="content"></ion-router-outlet>
</ion-split-pane>
1 Like