Space when app pulled down/up

When I pull down on my app, I get white space at the top.

When I pull up on my app, I get white space at the bottom.

This happens when running on iPhone. How can I eliminate these spaces?

Can you share the template? I think you are missing some tags.

<!-- THE HOMEPAGE  -->
<!-- RYAN - header color set in theme/variables.scss -->
<ion-header class="animated fadeInUpBig">
  <ion-navbar style="height: 59px">
    <div class= "titleicon">
    <!-- <img src="../../assets/imgs/logo.png" width="70px"> -->
    <ion-title style="font-size:larger;">MyWestern</ion-title> 

<ion-content padding style="background-color: #3d3d3d; "> 
      <ion-card class="animated fadeInUpBig animation-delay-500"  style="border-radius: 6px;">
        <ion-card (click)="expandBigCategory(item)" ion-item *ngFor="let item of bigCategoriesArray">
              <h1 [style.color]=item.font_awesome_color style="font-size: large; margin-top: 3px; margin-bottom: 3px;" class= {{item.font_awesome}}> </h1> 
              <label style="font-size: large; color: black; position: absolute; left: 15%; ">{{}}</label>
          <expandable [expandHeight]="item.itemExpandHeight" [expanded]="item.isExpanded">
              <ion-list style="padding-top: 10px;">
                  <ion-item style="background-color: #bcbbbb; " class="item-accordion" *ngFor="let element of item.relatedSmallCategories" (click)="openUrl(element.url)">
                      <h2> {{}} </h2>

I see some other tags in your template: expandable and tagline. I am assuming those are other Angular modules you have added to your project.

My suspect is those tags are mucking up the works. Try removing them (temporarily) and see how it works. Then add one back in and test again.

You also might want to consider moving the styling that you do out of the template and into the SASS file

1 Like

hmm, when I completely comment out home.html, I have the same problem…


<preference name="DisallowOverscroll" value="true" />

Thanks to @mhartington on StackOverflow