Can't interact with buttons when using tabs

Ionic Framework Ionic Angular
1

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

2

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

1 Like
3

Was having same issue. As you said using ion-tab-bar without ion-tabs then tabs are being disappeared…!How to resolve this?

1 Like
4

having the same problem, have you solved it somehow? the tab bar keeps disappearing

5

You have to put <ion-router-outlet> outside the <ion-tabs>

<ion-router-outlet></ion-router-outlet> <ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="home"> <ion-icon name="home"></ion-icon> Accueil </ion-tab-button> <ion-tab-button tab="map"> <ion-icon name="map"></ion-icon> Plan </ion-tab-button> <ion-tab-button tab="launch"> <ion-icon name="calendar"></ion-icon> Launch </ion-tab-button> <ion-tab-button tab="profile"> <ion-icon name="person"></ion-icon> Profile </ion-tab-button> </ion-tab-bar> </ion-tabs>

1 Like