Customized toolbar height overlaping my tabs

Ionic Framework ionic-v3
1

Hello,

I’m using Ionic tabs and above it I have my toolbar, if I change the min-height it overlaps my tabs, see image below:

image

that is my css:

.home-page {
    .toolbar {
        min-height: 200px;
    }
}

In my home-page-html:

<ion-toolbar>

</ion-toolbar>

<ion-tabs>
    <ion-tab *ngFor="let subject of subjects" [root]="subject.component" [tabTitle]="subject.title" [tabIcon]="subject.icon"></ion-tab>
</ion-tabs>

What am I missing?

2

I have the same question .

3

I don’t know if tha is correct, but what I did was:

<ion-navbar *navbar>

</ion-navbar>
<ion-tabs class="tabs">
    <ion-tab *ngFor="let subject of subjects" [root]="subject.component" [tabTitle]="subject.title" [tabIcon]="subject.icon"></ion-tab>
</ion-tabs>

and then:

.home-page {
    .tabs {
        ion-navbar-section {
            min-height: 9.6rem;
        }
    }
}