Problem with margin-top on ion-content on a page

Ionic Framework ionic-v3
1

My app will load a login page then after successful login will navCtrl setRoot to the first page, in my case is a personal information page. The ion-content is overlapped by the ion-header right above it.

Using ionic v3.3.0, Angular v4.1.2, typescript v2.3.3, and ionic-cli v1.3.0.

Happens in Browser, Android, and iOS platforms.

The app component will set root page to LoginPage below… The app.html source:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

The initial page is the login page:

<ion-content class="login-content" padding  scrollbar-y-auto>
  <ion-row class="logo-row">
    <img src="login.png" />
  </ion-row>
  <div class="login-box">
    <form (ngSubmit)="login()" #loginForm="ngForm">
      <ion-row>
        <ion-col>
          <ion-list list-inset>
            <ion-item>
              <ion-input type="text" placeholder="Username" name="username" [(ngModel)]="username" [ngModelOptions]="{standalone: true}" required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" required></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="submit-col">
          <button ion-button color="primary" round="true" full type="submit" [disabled]="!loginForm.form.valid">Login</button>
        </ion-col>
      </ion-row>
    </form>
  </div>
</ion-content>

The login.scss

  .login-content {
    background-image: linear-gradient(to top, #7cb7d7 0%, #FFFFFF 100%);

    .logo-row {
      padding: 80px 50px 0px 50px;
    }

    .login-box {
      padding: 20px 20px 0px 20px;
      margin-top: 30px;
    }

    ion-row {
       align-items: center;
       text-align: center;
     }

     ion-item {
         border-radius: 30px !important;
         padding-left: 30px !important;
         font-size: 0.9em;
         margin-bottom: 10px;
         border: 1px solid #ffffff;
         border-bottom: 0px !important;
         box-shadow: none !important;
     }

     .submit-col {
       margin: 0px 16px 0px 16px;
       padding-bottom: 20px;
     }

     .item-inner {
       border-bottom-color: #ffffff !important;
       box-shadow: none !important;
     }

     .submit-btn {
       background: #316A95;
       border-radius: 30px !important;
       border: 1px solid #ffffff;
     }
  }

This personal information page html source:

<ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Personal Information
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding scrollbar-y-auto *ngIf="employee != null">
   .....list with ion-cards here......
</ion-content>

scrollbar-y-auto is in app.scss as:

[scrollbar-y-auto] .scroll-content {
  overflow-y: auto !important;
}

When I go to any other page say a company contact page source:

<ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Company Contacts
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding scrollbar-y-auto>
  <ion-list>
    <ion-card ion-item text-wrap *ngFor="let contact of contacts">
      <ion-card-content>
        ...just a ion-car or two...
      </ion-card-content>
    </ion-card>
  </ion-list>
</ion-content>

Here is the rendered part of the ion-content of the company contact page:

<ion-content padding="" scrollbar-y-auto="" class="content content-md">
   <div class="fixed-content" style="margin-top: 56px;"></div>
   <div class="scroll-content" style="margin-top: 56px;">
       <ion-list class="list list-md">
           ...ion cards here...
       </ion-list>
   </div>
</ion-content>

I go back to Personal Information page: (It has that margin-top: 56px; which fixes the ion-content not being pushed down correctly.)

<ion-content padding="" scrollbar-y-auto="" class="content content-md">
  <div class="fixed-content" style="margin-top: 56px;"></div>
  <div class="scroll-content" style="margin-top: 56px;">
      <ion-list class="list list-md">
           ...ion cards here...
      </ion-list>
  </div>

What would be causing this to happen? Any help would be greatly appreciated.

2

I wanted to update that I am still getting into this issue.

When logging in successfully I run this code to set the first page of the app after login to be the root page.

The flow is: Login Page -> successful login set root to -> Personal Information page.

this.navCtrl.setRoot(PersonalInformationPage, { userAccount: userAccount });

I did want to state that I do not have a ion-header globally and it is set inside each root page. Would this matter if I was going from login page that doesn’t have a ion-header to transition to a page with an ion-header? It does seem to be a weird thing that if I slow down by stepping through the code the spacing shows up.

I do know that the ion-content is what calculates the spacing to make sure not to overlap the ion-header however it doesn’t seem to be being set correctly.

3

I have fixed my problem. Stupidly overlooking where I put an ngIf. Where it was it would not correctly apply spacing if the first load an employee didn’t exist. Doing the condition inside of the ion-content solved my issue.

<ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Personal Information
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding scrollbar-y-auto>
   <ion-list *ngIf="employee != null">
         <!-- .....list with ion-cards here...... -->
   </ion-list>
</ion-content>
3 Likes