Can't interact with buttons when using tabs


I’m creating a sign in page for my app (ionic 5). I have a form with two button in the form. The problem is when I add a ion-tabs, the element is over everything in the page, then I can’t interact with the buttons anymore.

Here is a fragment of the page.

<ion-content class="ion-padding">
	<form [formGroup]="form">
		<ion-button expand="full" [disabled]="!form.valid" (click)="login()">{{ 'login.login' | translate }}</ion-button>
		<ion-button expand="full" size="small" color="light" [routerLink]="['forgot-password']" (click)="login()">{{ 'login.forgot-password' | translate }}</ion-button>

		<ion-tab-bar slot="bottom">
			<ion-tab-button tab="sign-up">
				<ion-icon name="person-add-outline"></ion-icon>
				<ion-label>{{ 'login.sign-up' | translate }}</ion-label>

Thanks for the help

Try using the ion-tab-bar without the ion-tabs

1 Like