My template changes whether or not I use ion-router

Ionic Framework
1

Hello everyone!
I don’t understand why the content of ion-content is shown differently depending on whether or not I use ion-routing-outlet.

solutionA
solutionA633×867 31.6 KB

SolutionB
SolutionB633×867 34.7 KB

appcomponent.html

<ion-app>
  <app-header></app-header>
  <ion-content class="ion-padding">
    <ion-router-outlet></ion-router-outlet>
  </ion-content>
  <app-footer></app-footer>
</ion-app>

ion-router-outlet.htm

<ion-buttons slot="start">
  <ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Log In</ion-title>
<form>
  <ion-item lines="full">
    <ion-label position="floating">Email</ion-label>
    <ion-input type="text" required></ion-input>
  </ion-item>
  <ion-item lines="full">
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" required></ion-input>
  </ion-item>
  <ion-row>
    <ion-col>
      <ion-button type="submit" color="danger" expand="block">Sign In</ion-button>
    </ion-col>
  </ion-row>
</form>

thanks for your help!

2

i noticed that the problem is due to the “ion-page” class assigned by ion-router-outlet to app-login … any solution?

p.s app-login is the component selector assigned to the route