Problem with top margin

Ionic Framework ionic-v3
1

Hello,

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.

dd
dd.jpg1125×2435 184 KB

2

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

3

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>
      </ion-toolbar>
    <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>
        </div>
      </div>
  
</ion-header>



<ion-content padding-top text-center>
  <ion-grid>
    <ion-row>
      <ion-col>
        <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()">
      </ion-col>
      <ion-col>
        <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()">
      </ion-col>
    </ion-row>
    </ion-grid> 
</ion-content>```
4

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

<ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
5

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

6

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:

<ion-header>

  <ion-navbar>
    <ion-title>
      {{ 'VENUES_PAGE_TITLE' | translate }}
    </ion-title>
  </ion-navbar>

</ion-header>

image
image1080×1920 330 KB

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>
</ion-tabs>

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

<ion-header>

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

</ion-header>

search-tab
search-tab1080×1920 162 KB

7

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

dd
dd.jpg1125×2435 184 KB

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

32696661_10216307262900112_5821701536912244736_n
32696661_10216307262900112_5821701536912244736_n.jpg1125×2436 131 KB

Same thing for the bottom.

8

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).

9

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