Hi there,
i am currently struggling with getting ion-split-pane to work correctly on a specific sub page only (on ios).
I achieved this on Android with the following page template:
<ion-split-pane when="lg">
<ion-header>
<ion-navbar>
<ion-title>Page Title</ion-title>
<ion-buttons right>
<button ion-button icon-only menuToggle="formSideMenu">
<ion-icon name="list-box"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-menu id="formSideMenu" [content]="content" side="right" persistent="true">
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only menuToggle="formSideMenu">
<ion-icon name="list-box"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [ngSwitch]="MenuSegment" #menucontent>
Menu Content...
</ion-content>
</ion-menu>
<ion-content no-bounce #content id="content">
Page Conten...
</ion-content>
</ion-split-pane>
But on iOS the status bar padding/margin is not respected as on other pages without splitpane, so that the statusbar overlaps the header (this only happens on this specific page with the splitpane).
If i move the ion-header outside the split-pane, the statusbar padding/margin is respected but the page and menu content is overlapped by the header.
So, how can the desired layout be achieved on iOS?
Also on iOS the menu content does not resize properly on orientation change, regardless if i put the ion-header inside or outside the split-pane…
Does anyone has a hint on this?
Thanks…
ionic info on Windows Dev machine (Android development):
cli packages: (C:\Users\hannes\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.1.2
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.8.0
System:
Android SDK Tools : 26.1.1
Node : v6.11.1
npm : 5.5.1
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\Android\android-sdk
Misc:
backend : legacy
ionic info on iMac (iOS development):
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.1.2
Cordova Platforms : ios 4.5.4
Ionic Framework : ionic-angular 3.8.0
System:
ios-deploy : 1.9.1
Node : v6.11.2
npm : 5.6.0
OS : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : legacy
package config dependencies:
"dependencies": {
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@angular/tsc-wrapped": "^4.4.6",
"@ionic-native/app-version": "4.3.3",
"@ionic-native/barcode-scanner": "4.3.3",
"@ionic-native/camera": "4.3.3",
"@ionic-native/core": "4.3.3",
"@ionic-native/device": "4.3.3",
"@ionic-native/file": "4.3.3",
"@ionic-native/file-chooser": "4.3.3",
"@ionic-native/file-path": "^4.4.2",
"@ionic-native/globalization": "4.3.3",
"@ionic-native/google-analytics": "4.3.3",
"@ionic-native/keyboard": "4.3.3",
"@ionic-native/network": "4.3.3",
"@ionic-native/splash-screen": "4.3.3",
"@ionic-native/sqlite": "4.3.3",
"@ionic-native/status-bar": "4.3.3",
"@ionic/storage": "2.0.1",
"@ngx-translate/core": "^7.2.2",
"@ngx-translate/http-loader": "^0.1.0",
"angular2-uuid": "^1.1.1",
"cordova-android": "6.3.0",
"cordova-ios": "4.5.4",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-camera": "^4.0.2",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.1.0",
"cordova-plugin-customurlscheme": "^4.3.0",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-filechooser": "git+https://github.com/ihadeed/cordova-filechooser.git",
"cordova-plugin-filepath": "^1.2.0",
"cordova-plugin-globalization": "^1.0.9",
"cordova-plugin-google-analytics": "^1.8.3",
"cordova-plugin-network-information": "^1.3.4",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.1",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-evcore-extbuild-free": "git+https://github.com/spacepope/Cordova-sqlite-evcore-extbuild-free.git",
"cordova-windows": "^5.0.0",
"ionic-angular": "3.8.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"localforage": "^1.5.3",
"localforage-cordovasqlitedriver": "^1.6.0",
"lodash": "^4.17.4",
"phonegap-plugin-barcodescanner": "^6.0.8",
"runtypes": "^0.10.1",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.2",
"zone.js": "0.8.18"
},