Splitpane mobile

Ionic Framework ionic-v3
1

Hello,

I’m using the splitpane for my app with the side menu.
Everything works fine on tablets, but on my mobile phone’s, I get a blank screen with no errors or whatever. When I remove the split pane, everything works again. Can someone tell me what is wrong with my code? Running on Android and using Ionic 3.5

<ion-split-pane when="lg">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>  
  </ion-menu>  
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
1 Like
2

I have to do it like this, otherwise I keep getting a blank white screen on mobile devices:



<!-- Tablet -->
<ion-split-pane *ngIf="platform.is('tablet')">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>  
  </ion-menu>  
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

<!-- Mobile-->
<div *ngIf="!platform.is('tablet')">
  <ion-menu [content]="content" >
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>  
  </ion-menu>  
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false" ></ion-nav>
</div>
3

Edit: doesn’t work in portrait mode on tablets :frowning:

I compared both HTML files (landscape = working, portrait = blank screen) and the only difference is, that the landscape HTML has the “split-pane-visible” class.

4

Can you try adding “main” in the ion-nav.

<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>

As per the docs it is required.

2 Likes
5

This bug is still alive in the latest version of ionic. In the browser it’s ok.

6

Thanks, that worked for me!

7

Thanks worked for me :slight_smile: