Hello everyone,
This happens only on iOS, in android the tabs are NON SCROLL-ABLE. the user can scroll the content, but also it scrolls the tabs and the header.
click here to see the video LINK
meanwhile i have a menu that swipes from left to right side, it scrolls the content if i try two three times while if i catch the tabs it scrolls the TABS and if i try to scroll the CONTENT it keep SCROLLING THE TABS, HEADER TOO.
i have tried these two solutions, which it does not work for me:
solution 1
on the Solution 2 i get the tabs non scroll-able but i dont get the content and nothing works, as i can see it can switch between the tabs but none of the contents does not work.
click here to see second video
i have made two ion-tab-bar, one for activated profile with buttons enabled, and the other for disabled buttons for non activated profile.
this is app.component.html code containing menu:
<ion-app>
<ion-menu [disabled]="this.profileService.profile.length === 0" side="end" menuId="first" contentId="content1">
<ion-header>
<ion-toolbar>
<ion-title>{{ 'menu' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="true">
<ion-item lines="none" (click)="goToEditprprofileFromMenu()">
<ion-avatar style="width: 30px; height: 30px; margin-right: 25px;">
<img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
<ng-template #noProfilePicFound>
<img src="/assets/profilePic.png">
</ng-template>
</ion-avatar>
<ion-label>{{ 'my_profile' | translate }}</ion-label>
</ion-item>
<ion-item (click)="goToSubsciptions()" lines="none">
<ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
<ion-label>{{ 'subscriptions' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" (click)="addAFeedback($event)">
<ion-icon slot="start" color="primary" name="paper"></ion-icon>
<ion-label>{{ 'feedback' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" (click)="logout()" style="color: var(--ion-color-danger); ">
<ion-icon slot="start" color="danger" name="exit"></ion-icon>
<ion-label>{{ 'logout' | translate }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>
I also tried to add ion-split-pane, no success
<ion-app>
<ion-split-pane contentId="content1">
<ion-menu [disabled]="this.profileService.profile.length === 0" side="end" menuId="first" contentId="content1">
<ion-header>
<ion-toolbar>
<ion-title>{{ 'menu' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="true">
<ion-item lines="none" (click)="goToEditprprofileFromMenu()">
<ion-avatar style="width: 30px; height: 30px; margin-right: 25px;">
<img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
<ng-template #noProfilePicFound>
<img src="/assets/profilePic.png">
</ng-template>
</ion-avatar>
<ion-label>{{ 'my_profile' | translate }}</ion-label>
</ion-item>
<ion-item (click)="goToSubsciptions()" lines="none">
<ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
<ion-label>{{ 'subscriptions' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" (click)="addAFeedback($event)">
<ion-icon slot="start" color="primary" name="paper"></ion-icon>
<ion-label>{{ 'feedback' | translate }}</ion-label>
</ion-item>
<ion-item lines="none" (click)="logout()" style="color: var(--ion-color-danger); ">
<ion-icon slot="start" color="danger" name="exit"></ion-icon>
<ion-label>{{ 'logout' | translate }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1"></ion-router-outlet>
</ion-split-pane>
</ion-app>
this is tabs page with route:
<ion-header class="header-design-on-both">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="goToNotifications()" >
<ion-icon slot="icon-only" src="assets/new-admify-icons/notifications.svg"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar class="ion-text-center" mode="ios" (ionChange)="changeOnSearchBar($event)" (ionFocus)="focusOnSearch($event)" debounce="1000"></ion-searchbar>
<ion-buttons slot="end">
<ion-button (click)="goToChat()">
<ion-icon slot="icon-only" src="assets/new-admify-icons/chat.svg"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed" style="margin-bottom: 50px; opacity: 90%">
<ion-fab-button (click)="goToAuftrage()" size="small" style="--background: var(--ion-color-gradient-blue-to-green) !important">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-tabs mode="ios">
<ion-tab-bar mode="ios" slot="bottom" class="tabs-design-on-unternehmen">
<ion-tab-button mode="ios" tab="dashboard" class="ion-activatable">
<ion-avatar style="width: 30px; height: 30px;">
<img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
<ng-template #noProfilePicFound>
<img src="/assets/profilePic.png">
</ng-template>
</ion-avatar>
</ion-tab-button>
<ion-tab-button mode="ios" tab="briefkasten">
<ion-icon mode="md" src="assets/new-admify-icons/mail.svg" *ngIf="!selectedRouter.includes('briefkasten'); else doesIncludeBriefkasten"></ion-icon>
<ng-template #doesIncludeBriefkasten>
<ion-icon mode="md" src="assets/new-admify-icons/mail-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" tab="file-explorer" >
<ion-icon mode="md" src="assets/new-admify-icons/fileexplorer.svg" *ngIf="!selectedRouter.includes('file-explorer'); else doesIncludeFileExplorer"></ion-icon>
<ng-template #doesIncludeFileExplorer>
<ion-icon mode="md" src="assets/new-admify-icons/fileexplorer-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" (click)="goToChat()" >
<ion-icon mode="md" src="assets/new-admify-icons/wallet.svg" *ngIf="!selectedRouter.includes('buchhaltung'); else doesIncludewallet"></ion-icon>
<ng-template #doesIncludewallet>
<ion-icon mode="md" src="assets/new-admify-icons/wallet-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" (click)="goToChat()" >
<ion-icon mode="md" src="assets/new-admify-icons/calculator.svg" *ngIf="!selectedRouter.includes('cart'); else doesIncludeCalculator"></ion-icon>
<ng-template #doesIncludeCalculator>
<ion-icon mode="md" src="assets/new-admify-icons/calculator-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" (click)="openMenu()" >
<ion-avatar style="width: 30px; height: 30px;">
<img *ngIf="!selectedRouter.includes('kundenstamm'); else doesIncludeFinger" src="assets/new-admify-icons/Admify_Fingerprint.png">
<ng-template #doesIncludeFinger>
<img src="assets/new-admify-icons/Admify_Fingerprint-active.png">
</ng-template>
</ion-avatar>
</ion-tab-button>
</ion-tab-bar>
<ion-tab-bar mode="ios" slot="bottom" class="tabs-design-on-unternehmen">
<ion-tab-button mode="ios" disabled="true" tab="dashboard" class="ion-activatable">
<ion-avatar style="width: 30px; height: 30px;">
<img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
<ng-template #noProfilePicFound>
<img src="/assets/profilePic.png">
</ng-template>
</ion-avatar>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" tab="briefkasten">
<ion-icon mode="md" src="assets/new-admify-icons/mail.svg" *ngIf="!selectedRouter.includes('briefkasten'); else doesIncludeBriefkasten"></ion-icon>
<ng-template #doesIncludeBriefkasten>
<ion-icon mode="md" src="assets/new-admify-icons/mail-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" tab="file-explorer" >
<ion-icon mode="md" src="assets/new-admify-icons/fileexplorer.svg" *ngIf="!selectedRouter.includes('file-explorer'); else doesIncludeFileExplorer"></ion-icon>
<ng-template #doesIncludeFileExplorer>
<ion-icon mode="md" src="assets/new-admify-icons/fileexplorer-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" (click)="goToChat()" >
<ion-icon mode="md" src="assets/new-admify-icons/wallet.svg" *ngIf="!selectedRouter.includes('buchhaltung'); else doesIncludewallet"></ion-icon>
<ng-template #doesIncludewallet>
<ion-icon mode="md" src="assets/new-admify-icons/wallet-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" (click)="goToChat()" >
<ion-icon mode="md" src="assets/new-admify-icons/calculator.svg" *ngIf="!selectedRouter.includes('cart'); else doesIncludeCalculator"></ion-icon>
<ng-template #doesIncludeCalculator>
<ion-icon mode="md" src="assets/new-admify-icons/calculator-active.svg" ></ion-icon>
</ng-template>
</ion-tab-button>
<ion-tab-button mode="ios" disabled="true" (click)="openMenu()" >
<ion-avatar style="width: 30px; height: 30px;">
<img *ngIf="!selectedRouter.includes('kundenstamm'); else doesIncludeFinger" src="assets/new-admify-icons/Admify_Fingerprint.png">
<ng-template #doesIncludeFinger>
<img src="assets/new-admify-icons/Admify_Fingerprint-active.png">
</ng-template>
</ion-avatar>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
Any help would be appreciated, thank you.