I've using xCode 9.2, Ionic 3 with all the latest versions (updated everything I could think of) and I've added the following:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
When testing on devices and in the simulator, with iPhone 7 all works fine, but with iPhone X I'm getting the following problem:
Both the top and bottom sections of the App are way too at the top/bottom respectively. I think this is something to do with the new safe-areas on iPhone X.
I've tried adding the following, but it didn't work as it gave me a white space at the top on all devices.
<preference name="StatusBarOverlaysWebView" value="false" />
Has anyone experienced a similar problem?
My Ionic Info:
cli packages:
#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.6
Cordova Platforms : ios 4.5.2
Ionic Framework : ionic-angular 3.7.1
System:
ios-deploy : 1.9.2
ios-sim : 5.0.12
Node : v7.10.0
npm : 4.2.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : legacy
I have Ionic Angular at 3.7.1 (few months old but still too old).
If you update to 3.9.2 or newer (https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#390-2017-11-08) then it works like a charm!
Try this:
<meta name="viewport" viewport-fit=cover content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Related
My use case:
Call JavaScript function from JS file (included in project) in Ionic 4 on particular page.
I'm having following issue.
ERROR TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at n.exports (ocw.js:4850)
at a (ocw.js:4850)
at Object.209.100 (ocw.js:4851)
at s (ocw.js:4850)
at ocw.js:4850
at Object.327.131 (ocw.js:4852)
at s (ocw.js:4850)
at ocw.js:4850
Steps followed:
Included JS file under src->assets
added reference in index.html after cordova.js file
<!-- cordova.js required for cordova apps (remove if not needed) -->
<!-- <script src="assets/ocw.js"></script> -->
<script src="cordova.js"></script>
<script src="assets/ocw.js"></script>
In desired file, declared variable as function name
called javascript function under, ionViewDidLoad
Ionic setup:
Ionic:
ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 6.4.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 9 other plugins)
System:
ios-deploy : 1.9.2
ios-sim : 6.0.0
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
You need to export the function in your javascript file and then import it in your pagename.page.ts to be able to use it.
I am using ionic-3 and when I am compiling ionic project through ionic serve command, Its taking 4-6 mins for me.
Versions of following components:
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
#ionic/app-scripts : 2.1.4
Cordova Platforms : android 7.1.0
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 26.1.1
Node : v7.10.1
npm : 5.4.2
OS : Linux 4.4
Environment Variables:
ANDROID_HOME : /home/spaneos/Android/Sdk
Misc:
backend : pro
node version: 7.10.0
npm version: 5.4.2
It depends on your system specification. If you have a higher config machine then it will take less time. I hope you got the point.
Ionic app seems to have stopped working and I am not able pinpoint the cause. I started again from blank app, but this error persists
Not sure if I am missing setup steps or issue with version mismatch? any pointers would help as I have wasted weeks on this issue
Accepted answers, like -
WebpackJsonp missing after Ionic 3 update or Ionic 2: ReferenceError: webpackJsonp is not defined have not worked
index.html has
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
ionic info -
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
#ionic/app-scripts : 3.1.8
Cordova Platforms : android 6.4.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
Node : v9.5.0
npm : 5.7.1
service.worker.js has-
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
I wanna implement ionic date time (https://ionicframework.com/docs/api/components/datetime/DateTime/)
to my project.
date time problem here are
But ı cannot see date time buttons. I don't understand what the actual problem is.
This is output of ionic info command.
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.8
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.9.2
System:
Node : v6.10.2
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 8.2.1 Build version 8C1002
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : legacy
You can do this:
<ion-datetime displayFormat="hh:mm a" [(ngModel)]="myDate"></ion-datetime>
It will give time with format.
I hope it will help you.
I did all the needed updates and added the needed code to meta in index.html, but I still get white space at the bottom of the header before the content section starts. Please see screenshot. Also, it appears like the Title is being cut.
Here is my meta:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
My HTML:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Saved</ion-title>
</ion-toolbar>
</ion-header>
My Ionic Info:
cli packages:
#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.6
Cordova Platforms : ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
ios-sim : 5.0.12
Node : v7.10.0
npm : 4.2.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
So my problem was that in App.scss I've explicitely changed the height of the Toolbar as follows:
.toolbar-background-ios {
background: #ffffff;
height: 70px; //This was the problem
}
By removing the height attribute, all works perfectly well for oth iPhone X and older iPhone 7 plus.
To elaborate if you ever want to change the height of the navigation bar, you set it directly in your variables.scss so it can be set globally like:
$toolbar-ios-height: 70px;
$toolbar-md-height: 70px;
The Very first thing to check is the Meta that should be like this
name="viewport" content="viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
And if it does not resolve your issue then try to update the status
bar plugin.
Run the following command.
ionic cordova plugin add
https://github.com/apache/cordova-plugin-statusbar.git
but before doing that remove the previously installed status bar
plugin and then install the above it will surely fix your problem.
References
GitHub link : https://github.com/apache/cordova-plugin-statusbar.git
If the issue still Persists then Kindly check your Global.SCSS file and look for the following
.platform-ios.platform-cordova:not(.fullscreen)
and find the toolbar-ios in that and adjust the header properties according to your requirements.