Ionic side menu bug

Question

When i startup my ionic app it sometimes starts with a different menu"layout"

in the first two images is the first example of how the layout turns out. and in the third picture is then second layout.

https://i.sstatic.net/YWGc7.jpg

https://i.sstatic.net/ZSosZ.jpg

https://i.sstatic.net/jKQmM.jpg

i have tried putting tags on <ion-menu-button></ion-menu-button> like autoHide.

my code for app.component.html:

<ion-app>
    <ion-split-pane>
        <ion-menu *ngIf="Auth" side="start">
            <ion-header>
                <ion-toolbar>
                    <ion-title>SocialApp</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content>
                <ion-list>
                    <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
                        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                            <ion-icon padding-end [name]="p.icon"></ion-icon>
                            <ion-label>
                                {{p.title}}
                            </ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

and the code for one of the pages

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button ></ion-menu-button>
        </ion-buttons>
        <ion-title>
            {{ 'header.map' | translate }}
        </ion-title>
        <ion-button (click)="help.showHelp('map')" slot="end">
            <ion-icon icon="help"></ion-icon>
        </ion-button>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div id="map"></div>
</ion-content>

i would like to always get the same layout on the screen instead of somtimes getting one or the other.

if someone could help me explain why this happens and how i could prevent this it would be much appreciated.

Answer 1

the ion-split-pane spits depending on the devices screen size https://ionicframework.com/docs/api/split-pane. If you want it permanently on the first one you could do this <ion-split-pane when="xs"> or permanently on the second one <ion-split-pane disabled='true'> or a specific amount <ion-split-pane when="500">. couldn't replicate what you were experiencing without resizing my browser :/