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.
Related
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 am using the camera preview plugin in my Ionic v1 app.
When I click Start Cam, the camera preview starts and When i Tap Swap Cam,
the $scope.swapCam() function gets called twice, i.e I can see console.log('swapping'); printing twice.
Have tested without CameraPreview.switchCamera();, works fine.
Any help appreciated. Thanks
This is my HTML
<ion-view view-title="Dashboard">
<ion-content class="padding">
<button ng-click="startCam()">Start Cam</button>
<button ng-click="swapCam()">Swap Cam</button>
</ion-content>
</ion-view>
and this is my Controller
.controller('DashCtrl', function($scope) {
$scope.startCam = function(){
CameraPreview.startCamera({x: 50, y: 50, width: 300, height: 300, toBack: false, previewDrag: true, tapPhoto: true});
}
$scope.swapCam = function(){
console.log('swapping');
CameraPreview.switchCamera();
}
})
ionic info:
#ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
cordova (Cordova CLI) : 6.5.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
Cordova Platforms : android 6.1.2
Ionic Framework : ionic1 1.3.4
Witout from option PostCSS could generate wrong source map or do not
find Browserslist config. Set it to CSS file path or to undefined to
prevent this warning
ionic3 project, when I running ionic corodva bulid ios --prod showing this warning for me.
ionic info
cli packages: (/usr/local/lib/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.7
Cordova Platforms : android 6.3.0 ios 4.4.0
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v6.11.3
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
UPDATE:
I tried to update my npm to 5.5.1 and node to 8.6.0, but still showing.
Finally, this warning solved. Thanks to Suraj Rao
First find sass.js file under /node_modules/#ionic/app-scripts/dist/sass.js.
inside search var postcssOptions and add from: undefined,
Finally should be like this:
var postcssOptions = {
from: undefined,
to: path_1.basename(sassConfig.outFile),
map: autoPrefixerMapOptions
};
Reference： workaround.
For whoever directly used PostCSS and met this issue then came here,
Change your
postcss( any_plugins ).process( css )
to
postcss( any_plugins ).process( css, { from: undefined } )
can fix the issue.
For me, adding map: { inline: false } solved my problem.
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">
I use ionic thumbnail list like the document said:
```
<ion-item>
<ion-thumbnail item-start>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>
```
I copied same code to my project, when it didn't render correctly.
My list view show like belwo:
And i checked the html ion-item and ion-thumbnail generate is
It doesn't like ionic example. the ion-thumbnail directive incorrectly wrapped by ion-label.
I don't know what happen, below is my ionic info
```
cli packages:
#ionic/cli-plugin-cordova : 1.5.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-cordova)
#ionic/cli-plugin-ionic-angular : 1.4.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-ionic-angular)
#ionic/cli-utils : 1.6.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-utils)
ionic (Ionic CLI) : 3.6.0 (/Applications/My-Project/sharemap/node_modules/ionic)
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 1.3.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.0.1
System:
Android SDK Tools : 26.0.2
Node : v6.10.1
OS : macOS Sierra
Xcode : Xcode 8.3 Build version 8E162
ios-deploy : 1.8.1
ios-sim : 5.0.6
npm : 3.10.3
```
What's wrong with my code?
i found the solution:
I change the item-start directive to item-left, then problem solved.
i don't why this directive not work like Ionic Document said.
And I also found that item-end not work like document either. You need to change to item-right.
The right code is below:
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>