Problem with top margin


I have a problem when I start my app sometimes there is no top-margin (like the screen) and sometimes its ok, someone gave a solution please ?!

Thank you.

Well share your code then if you need help. There is no magic to help you based on screenshot…

Sorry for being late, this is the code of my home page app :

<ion-header >
    <ion-toolbar >
        <ion-title ><b>Around SQLI</b></ion-title>
    <div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
        <div class="flb">
          <div class="Aligner-item Aligner-item--top"></div>
          <img src="assets/imgs/logo.png">
          <div class="Aligner-item Aligner-item--bottom"></div>

<ion-content padding-top text-center>
        <img style="border-radius:10px;margin-bottom:10px;" src="assets/imgs/bio.jpg" (click)="goToPageBIO()"><br>
        <img style="border-radius:10px;" src="assets/imgs/rest.jpg" (click)="goToPageRE()">
        <img  style="border-radius:10px;margin-bottom:10px;"  src="assets/imgs/ff.jpg" (click)="goToPageFF()">
        <img style="border-radius:10px;" src="assets/imgs/supp.jpg" (click)="goToPageSU()">

Any reason why are you not using standard approach with navbar in top panel?

      Ionic Blank

Maybe I forgot to use it, but is it important ?

You have a Tab Bar and tap-able images so you want your users to navigate to other pages. On those ‘other’ pages you will often use a ‘ion-navbar’ in your header, for example:


      {{ 'VENUES_PAGE_TITLE' | translate }}


However, on your Tab pages:

<ion-tabs #tabs selectedIndex="2" (ionChange)="onIonChanged($event)">
  <ion-tab [root]="tab0Root" tabUrlPath="activity-tab" tabIcon="fa-fal-list"></ion-tab>
  <ion-tab [root]="tab1Root" tabUrlPath="location-tab" tabIcon="fa-fal-map-marker"></ion-tab>
  <ion-tab [root]="tab2Root" tabUrlPath="search-tab" tabIcon="fa-fal-street-view"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="person-tab" tabIcon="fa-fal-user"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="notifications-tab" tabIcon="fa-fal-bell"></ion-tab>

You don’t need an ‘ion-navbar’ in your header, for example


  <ion-searchbar id="searchbar" placeholder="{{ 'SEARCH_PAGE_SEARCHBAR_PLACEHOLDER' | translate }}" (ionInput)="getItems($event)"></ion-searchbar>


Thank you, this is not the problem.
I don’t know if you understood what I said in the topic.
When I start the App (in the screen) the photos are cut off

But when I click on a category and I get back to the home page, it becomes normal

Same thing for the bottom.

Yes, it looks like the photos are cut off.

Its definitely related to an issue in your markup (.html), your code (.ts) or possibly your styles (.scss).

Do you have any suggestion ? because every app I create it, I got the same problem :confused: