How can I move the purple bar down? There is a title I was to display right in the center - it’s currently barely visible in white text.
Already tried:
I’m just missing one information, which ionic-angular version are you using? Could you print out your ionic info results? I guess it need ionic-angular >= 3.7
Also how does your page looks like, do you have a ion-header in your page? If not, try with even an empty one <ion-header></ion-header>
ionic info
ng-version
title bar in app.html
Looks good on browser & Android emulator - but not in iPhone X emulator
Update to the latest version of ionic-angular (3.9.2).
Version 3.8.0 introduced more iPhone X compatibility
–> https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
1 Like
I was about to say to same things, thx. Exactly, you have to upgrade ionic-angular.
Pay attention to the changelog, you will have to upgrade angular itself too.
But no worries to have, not a difficult update
Mmmh
-
maybe trying to
ionic remove/add platform iosagain? maybe a plugin wasn’t copied correctly… -
I’ve got
cordova-plugin-statusbar2.4.1 not 2.4.2-dev…did something broke in this dev version?
Oh wait…something else. You said you have an ion-header … in your app.html, I just notice that now. Would you try to remove it from there and add it in your pages?
I’ve got ion-header in my pages
@reedrichards Well, actually, I just have 1 page - it’s just app.html - I don’t have any additional pages… (nothing in the pages folder).
I made this app by just adding to Ionic’s side menu template (CLI command: ionic start MyIonicProject sidemenu). It seems to be spaced properly there - so I’ll compare my code…
I’m facing a similar issue, upgraded my app from previous versions. Now on latest ionic-angular and followed all the iphone X checklists but it still insists on using the safe space. If you find a solution before I get a chance to deep dive on it can you please post?
Could you show the content of your app.html?
<!-- THE HOMEPAGE -->
<!-- The <ion-navbar> is a template for the navigation bar on this page. As we navigate to this page, the button and title of the navigation bar transition in as part of the page transition. -->
<!-- <ion-navbar style="height: 90px"> -->
<ion-navbar>
<!-- <ion-title style = "position: relative; top: 20px" >MyWestern</ion-title> -->
<ion-title>MyWestern</ion-title>
</ion-navbar>
<!-- <ion-content class="menu-content"> -->
<!-- this is just determining if the info inside the sidebar is ready to view -->
<ion-list *ngIf="sidebarInfoReadyToView">
<!-- makes the buttons - go through all pages, when click, open the page - display the page title as the label -->
<!-- event binding - when we click, run the enableThisMenu function - passing in the bigCategory we clicked on -->
<!-- this will figure out what you clicked on - we can't have to write this explicitly -->
<ion-item ion-item *ngFor="let element of bigCategoriesArray" (click)="expandBigCategory(element)">
<div>
<i class= {{element.font_awesome}} style="color: #ffcc00"></i>
<!-- bigCategory name -->
<label>{{element.name}}</label>
</div>
<!-- if the bigCategory is expanded -->
<div *ngIf="element.isExpanded" >
<!-- ***** WHAT TO DO WHEN WE CLICK A SMALL CATEGORY ******* -->
<ion-item menuClose ion-item *ngFor="let element of element.relatedSmallCategories" (click)="openUrl(element.url)">
<!-- smallCategory name -->
<label> {{element.name}} </label>
</ion-item>
</div>
</ion-item>
</ion-list>
<!-- </ion-content> -->
Thx. So like I said, could you try using ion-header?
I think the bar we only got the right size if you use
<ion-header>
</ion-header>
<ion-content>
</ion-content><!-- THE HOMEPAGE -->
<!-- The <ion-navbar> is a template for the navigation bar on this page. As we navigate to this page, the button and title of the navigation bar transition in as part of the page transition. -->
<!-- <ion-navbar style="height: 90px"> -->
<ion-header>
<ion-navbar>
<!-- <ion-title style = "position: relative; top: 20px" >MyWestern</ion-title> -->
<ion-title>MyWestern</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!-- <ion-content class="menu-content"> -->
<!-- this is just determining if the info inside the sidebar is ready to view -->
<ion-list *ngIf="sidebarInfoReadyToView">
<!-- makes the buttons - go through all pages, when click, open the page - display the page title as the label -->
<!-- event binding - when we click, run the enableThisMenu function - passing in the bigCategory we clicked on -->
<!-- this will figure out what you clicked on - we can't have to write this explicitly -->
<ion-item ion-item *ngFor="let element of bigCategoriesArray" (click)="expandBigCategory(element)">
<div>
<i class= {{element.font_awesome}} style="color: #ffcc00"></i>
<!-- bigCategory name -->
<label>{{element.name}}</label>
</div>
<!-- if the bigCategory is expanded -->
<div *ngIf="element.isExpanded" >
<!-- ***** WHAT TO DO WHEN WE CLICK A SMALL CATEGORY ******* -->
<ion-item menuClose ion-item *ngFor="let element of element.relatedSmallCategories" (click)="openUrl(element.url)">
<!-- smallCategory name -->
<label> {{element.name}} </label>
</ion-item>
</div>
</ion-item>
</ion-list>
</ion-content>
I still get the same problem when using this… Also, I tried deleting everything in app.html and directly replacing it with Ionic’s home.html (as part of the tutorial - the tutorial does actually look correct on the simulator) - but for me, it didn’t show up correctly. I think the problem might be elsewhere besides the HTML.
Success! I transferred my code into Ionic’s starter template: instead of having my code in the “app” folder, I moved it to a page in the “pages” folder. Now it seems to work perfectly! Thanks for your help! @reedrichards @beck24 @MattE
1 Like
I also got mine working, but there was no code moving necessary. The unmentioned step is that you need to re-run ionic cordova resources to generate a new size of splash screen for iphone X. Without that new image, the app will always render in the safe space.