How to prevent ion-router-outlet override ion-grid and expand to whole page-CodePudding

This is an UI question on angular-ionic project. There are 1 component login.

Inside app.component.html, there are an ion-content container containing ion-grid element. Inside it there are 2 row. First row wrap an ion-toolbar. Second row wrapping an ion-router-outlet. Like below :

<ion-content>
    <ion-grid>
        <ion-row><ion-toolbar>
            <ion-buttons slot="start">
            <ion-menu-button autoHide="false"></ion-menu-button>
            </ion-buttons>
            <ion-title>Title</ion-title>
        </ion-toolbar></ion-row>
        <!-- nav bar is the menu, menu is the nav bar -->
        <app-nav-bar></app-nav-bar>
        <ion-row><ion-router-outlet id="menuContent"></ion-router-outlet></ion-row>
    </ion-grid>
</ion-content>

Eventually, router will route to the login component which contains html file that also has an ion-content wrap a ion-grid wrapping a ion-segment element.

<ion-content>
  <ion-grid>
    <ion-segment >
      <ion-segment-button ><ion-label>Login</ion-label></ion-segment-button>
      <ion-segment-button ><ion-label>New Password</ion-label></ion-segment-button>
    </ion-segment>
    <form>...</form>
    </ion-grid>
</ion-content>

In my epxectation, the outlet content should sit below the toolbar. Yet reality is the outlet expand and get overlap by the toolbar, blocking the view of the segment element. What am I doing wrong that makes the toolbar overlap the routeroutlet content, and how can I prevent this from happening? Right now I am trying to fix the problem with grid, row and col. But do I eventually need to touch on the native css file?

CodePudding user response：

I have found the answer, remove the row and col as it does nothing. Add the ion-app element, put tool bar and the router outlet inside a div ,class is "ion-page". Here are the answer.

<ion-app>
    <!-- menu component -->
    <app-nav-bar></app-nav-bar>
    <div  id="menuContent">
            <!-- This tool bar menu button is the reason ion-menu works -->
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-menu-button autoHide="false"></ion-menu-button>
                </ion-buttons>
                <!-- use thumbnail instead of ion-img, because ionic will break line somehow, praise ionic -->
                <ion-title>Title</ion-title>
            </ion-toolbar>
        <ion-content><ion-router-outlet id="menuContent"></ion-router-outlet></ion-content>
    </div>
</ion-app>