Ionic 2: Why does it add .fixed-content and .scroll-content

Question

Ionic seems to be adding a <div class='fixed-content'> and <div class='scroll-content'> to my view and it's creating double margins. It seems to just add a lot of content and I'm assuming I can control it, I just don't know how.

Why would that happen?

my html:

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col >
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col>
      <ion-card>
        <ion-card-content>
          <img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

rendered content:

<ion-content class="content content-md">

<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid">
  <ion-row class="row">
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col class="col">
      <ion-card class="card card-md">
        <ion-card-content class="card-content card-content-md">
          <img src="../assets/newred_newblue_outline.png">
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</div>
</ion-content>

Answer 1

Yes, Ionic2 adds both fixed-content and scroll-content.

The fixed-content as the name says it's the content on the page that is fixed, if it's adding both margin to top and bottom it's because you have a header and a footer on this page, and it adds exactly the amount of px it's needed to leave the space for your header and footer on your device. So if you check on a device it may be 36px, on anothe it's 72px. If you want to test, remove the footer or header and check again, it'll not have margin top or bottom.

The scroll-content is where the scrollable content is, in this case, your ion-content. Everything inside ion-content is scrollable and added on scroll-content.

You can force css to it (i use the fixed-content class to add a non-scrollable background image to some projects), but it's not something nice to do because it'll make your content on the page go up, so if you have content right bellow the header it may be initialized behind the header.

So that's why Ionic2 creates these classes, it's just to ensure that your scrollable content goes right where it needs to be.