Split Pane not displaying correctly

wildsun · January 25, 2019, 6:44pm

First note, I’m using @ionic/vue so it could be in that or it could be Ionic on the whole.
Either way, it seems a pretty foundational issue

Using code almost identical to that described here;

Exact code can be read here;

gist.github.com

https://gist.github.com/WildSunLove/8a0956503900b3ef7ad9cd6f8c6fc999

App.vue

<template>
  <ion-app>
    <ion-split-pane when="sm">
      <ion-menu>
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>

This file has been truncated. show original

The issue I’m running into is that when the screen size is greater than small, so it splits the screen, the menu is not displaying correctly. And when the screen size is small, so it has a pull out menu, the length of the text in the header determines the width of the header and the entire screen, rather than it filling the length of the screen as one would expect.

Here’s images to better describe what’s going on;

spocklogical · July 16, 2019, 6:30pm

I’m having a very similar issue. Do you know if there’s already an issue opened on the GitHub?

spocklogical · July 16, 2019, 8:10pm

Figured out what my issue was, you have to have the split-pane wrapped around the router output to have it be able to change its css. So I guess I have to make a choice between putting my navigation in the app.vue and having alignment and all sorts of other issues or got without the split pane.