Ion-Split-Pane doesn't scale to mobile


#1

I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:

   <ion-split-pane when="md">
      <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>
      <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
      <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
    </ion-split-pane>

The behavior I’m getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:

When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.

This behavior is so far from the documentation that I must have something wrong, but I’m not certain what. Anyone know how I could get this panel working?