Can't interact with buttons when using tabs

Hello,

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>
	</form>

	<ion-tabs>
		<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>
			</ion-tab-button>
		</ion-tab-bar>
	</ion-tabs>
</ion-content>

Thanks for the help

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

1 Like