Split Pane menu "hamburger" visible when first opened at large size

Ionic Framework ionic-v3
1

I’m trying out the split pane (which I’m really excited about for desktop/PWA support) and was wondering if anyone else was running into this very minor issue. When my app first loads on a large screen, with the left pane visible, the menu toggle hamburger is visible. Any navigation, or resizing the window a bit seems to fix it. Just wondering what I’m doing wrong :slight_smile:

image
splitpane.gif873×299 217 KB

Thanks!

<ion-split-pane>
<ion-menu [content]="menuContent" *ngIf="api.token">
	<ion-list no-lines>
		<button ion-item (click)="openPage(homePage)">
			<ion-icon name="home"></ion-icon> Home
		</button>
		<button ion-item (click)="openPage(aboutPage)">
			<ion-icon name="information-circle"></ion-icon> About
		</button>
		<button ion-item (click)="logout()">
			<ion-icon name="exit"></ion-icon> Logout
		</button>
	</ion-list>
</ion-menu>

<ion-nav id="nav" #menuContent main [root]="rootPage"></ion-nav>
1 Like
2

In my application, I don’t have a hamburger menu icon at all by default. I’m only able to open the side menu on smaller screens by sliding from left. I’m on:

"@angular/common": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",

Did you do something to add that button? Or was it there automagically with the code you provided?

3

Oh, I just wasn’t using the menuToggle directive. Now that I’ve added one to my ion-navbar, I have the hamburger menu now.

But, for your problem, when my page first loads on a large screen I don’t see the menuToggle button (it is working as expected). Also, the speed of it showing/hiding is much more snappy than in your video when I drag the width of the view.

Also, my ion-split-pane is not in the root app.component.html. My initial root page is for sign in and doesn’t have a side menu. The component I set as root after my users log in has the side menu. I’m not sure if changing that could make a difference for you.

5

Having the same problem

6

I had the same problem when I used “ngIf” on the side menu. I switched to the “when” input in ion-split-pane and it solved the issue.

Hope it can help !

7

Have you already solved this? I just ran into the same problem, and using when didn’t work. So I just customized the behavior with media query. Let me know if you have better solutions! Thanks :slight_smile: