Hello Folks,
Ionic 4 tabs working fine on iPhone 8 and smaller devices, but when it comes to iPhone X,
tabs getting too much smaller.
any suggestion will be appriciated.
See below image
Thanks
Is there anyone can help me out from this
Hey, no issues here with my tabs on iPhone X.
Try checking your custom css, perhaps you styled something for that screen size.
1 Like
Hi @alex796, i added tab bar in every page, will that make any problem to tab bar on iPhone x or greater devices.
What do you mean with „added to every page“? Usually there is only one component with the tab bar itself and the content of the different tabs is being rendered in the area above the tab buttons.
How did you create that app?
For a tab bar styled app you should use ionic start myApp tabs, then the required components and the routing will be generated accordingly.
Hey, @alex796, i created app using sidemenu and i do require tabs also on home page , so i added this using ionic html tags on home page but those tabs getting to much smaller than usual on iphone x and larger devices.
Hi,
I think this should work too as expected, if you created an ion-tab structure on the homepage with a tab bar in slot bottom as described in the docs.
I would suggest double-checking your css:
Remove all custom css from the home page and the global.scss and see if it works. Then re-add your styles step by step to locate the one thats causing the problem.
Also you should check the nesting of the html tags for creatimg the tab structure. ion-tab has to be on the top level of your home page because it holds the container for rendering the individual tab content as well as the tab bar itself.
Alex
this is my code
<div class="custom_header">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button color="light" size="large"></ion-menu-button>
</ion-buttons>
<ion-title class="ion-text-center">
<span class="center2">HOME</span>
</ion-title>
<ion-buttons slot="end">
<a href="tel:+966 9876543210" class="Right3"><img src="assets/images/support.png"></a>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-searchbar class="custom_search" spellcheck="true" showCancelButton="true" animated="true" placeholder="Start your search here" color="light" type="search" (ionBlur)="displayproducts()"></ion-searchbar>
</div>
<ion-content>
<ion-slides pager="true" #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)">
<ion-slide>
<img class="banner" src="assets/images/banner.png">
</ion-slide>
<ion-slide>
<img class="banner" src="assets/images/banner1.png">
</ion-slide>
<ion-slide>
<img class="banner" src="assets/images/banner.png">
</ion-slide>
</ion-slides>
<ion-item class="custom_item">
<ion-label>English / Arabic</ion-label>
<ion-toggle [(ngModel)]="English"></ion-toggle>
</ion-item>
<div class="product_cards">
<ion-grid>
<ion-row>
<ion-col>
<span class="product_title">Products</span>
</ion-col>
<ion-col class="ion-float-right">
<ion-button class="ion-float-right cbtn" shape="round" size="small" color="danger">View All</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
</div>
</ion-content>
<ion-footer class="custom_footer">
<ion-toolbar>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon color="primary" ios="ios-list-box" md="md-list-box"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon color="primary" ios="ios-home" md="md-home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon color="primary" ios="ios-cart" md="md-cart"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-toolbar>
</ion-footer>
As you said above, Now i’ll create blank project and i’ll check by adding tabs on home page
This code will definitely not work, since you created the tabs in the footer itself.
ˋion-tabˋ is the content area of the page and contains the tabs in slot ˋbottomˋ.
You have to restructure your html. Follow the example here: https://ionicframework.com/docs/api/tabs
I added their because i want fixed tabs at bottom, and if we add them in footer they will automatically get fixed.
@alex796 i added tabs in content area then it won’t work
Now my code looks like this
<div class="custom_header">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button color="light" size="large"></ion-menu-button>
</ion-buttons>
<ion-title class="ion-text-center">
<span class="center2">HOME</span>
</ion-title>
<ion-buttons slot="end">
<a href="tel:+966 9876543210" class="Right3"><img src="assets/images/support.png"></a>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-searchbar class="custom_search" spellcheck="true" showCancelButton="true" animated="true" placeholder="Start your search here" color="light" type="search" (ionBlur)="displayproducts()"></ion-searchbar>
</div>
<ion-content>
<ion-slides pager="true">
<ion-slide>
<img class="banner" src="assets/images/banner.png">
</ion-slide>
<ion-slide>
<img class="banner" src="assets/images/banner1.png">
</ion-slide>
<ion-slide>
<img class="banner" src="assets/images/banner2.png">
</ion-slide>
</ion-slides>
<ion-item class="custom_item">
<ion-label>English / Arabic</ion-label>
<ion-toggle [(ngModel)]="English"></ion-toggle>
</ion-item>
<div class="product_cards imb">
<ion-grid>
<ion-row>
<ion-col>
<span class="product_title">Products</span>
</ion-col>
<ion-col class="ion-float-right">
<ion-button class="ion-float-right cbtn" shape="round" size="small" color="danger">View All</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
<div class="custom_cards" (click)="openModal()">
<ion-item>
<ion-avatar slot="start" class="fish_image">
<img src="assets/images/fish.png">
</ion-avatar>
<ion-label>
<h3 class="dish_name">Indian Rowas</h3>
<p class="order_status">SAR 100</p>
<p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
<ion-button color="primary" size="small" fill="outline" class="add_btn">Add</ion-button>
</ion-label>
</ion-item>
</div>
</div>
<ion-toolbar class="fixbottom">
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon color="primary" ios="ios-list-box" md="md-list-box"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon color="primary" ios="ios-home" md="md-home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon color="primary" ios="ios-cart" md="md-cart"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-toolbar>
</ion-content>
Hi @amjayesh07, you are mixing up tabs with toolbar. These are completely different concepts. Since I don’t know what you are trying to implement, a toolbar with icons or a tabbed navigation, i am not able to help you accordingly.
I suggest you study the examples for ion-tab, which are used for a tabbed navigation, and the example for ion-toolbar thoroughly, then decide which one is the best for your project.
As i mentioned before, ion-tabs are used for a tabbed navigation interface. Tabs are a content area where multiple different templates are shown, depending on which tab is selected. Imagine this like a cardboard where you can “flip the cards”. Your main tab module must NOT contain an ion-content, because the ion-tab IS the content area. Only the different tab pages will have a template with an ion-content with the UI elements of that specific tab (or “card” if you stick to the cardboard image stated earlier).
If the above linked Ionic documentation is not sufficient for you, have a look here https://alligator.io/ionic/ionic-4-tabs/ where tabbed navigation is created from the scratch.
If you like to implement a toolbar in the footer of your page, like your last code example assumes, remove the ion-tab completely and add only the desired icons for your toolbar. Navigation and routing have to be implemented manually then of course.
Here is the toolbar documentation: https://ionicframework.com/docs/api/toolbar
Alex
i have same issue with ionic 5 …do you know how to solve?
this is my html page
<ion-tab [root]=“transaction” tabTitle=“TRANSACTION” tabIcon=“one”>
<ion-tab [root]=“home” tabTitle=“SEND” tabIcon=“two”>
<ion-tab [root]=“account” tabTitle=“ACCOUNT” tabIcon=“three”>
and this is css
page-tabs {
.tabbar, .tabs-ios, .tabs-md {
.tab-button-icon {
background-repeat:no-repeat;
background-position:center;
border-top: 1px;
border-top-color: blue;
height:48px;
width:48px;
&:before {
display:none;
}
}
}
.tabs-ios {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=one], .tab-button-icon[aria-label=one] {
background-image: url(’…/assets/tabs/transaction_off.png’);
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=two], .tab-button-icon[aria-label=two] {
background-image: url('../assets/tabs/home_off.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=three], .tab-button-icon[aria-label=three] {
background-image: url('../assets/tabs/account_off.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
}
a[aria-selected=true] {
.tab-button-icon[ng-reflect-name=one], .tab-button-icon[aria-label=one] {
background-image: url('../assets/tabs/transaction_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=two], .tab-button-icon[aria-label=two] {
background-image: url('../assets/tabs/home_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=three], .tab-button-icon[aria-label=three] {
background-image: url('../assets/tabs/account_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
}
}
.tabs-md {
a[aria-selected=false]{
.tab-button-icon[ng-reflect-name=one], .tab-button-icon[aria-label=one] {
background-image: url(’…/assets/tabs/transaction_off.png’);
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=two], .tab-button-icon[aria-label=two] {
background-image: url('../assets/tabs/home_off.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=three], .tab-button-icon[aria-label=three] {
background-image: url('../assets/tabs/account_off.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
}
a[aria-selected=true] {
.tab-button-icon[ng-reflect-name=one], .tab-button-icon[aria-label=one] {
background-image: url('../assets/tabs/transaction_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=two], .tab-button-icon[aria-label=two] {
background-image: url('../assets/tabs/home_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
.tab-button-icon[ng-reflect-name=three], .tab-button-icon[aria-label=three] {
background-image: url('../assets/tabs/account_on.png');
background-repeat: no-repeat;
background-size: 70% 70%;
}
}
}
.tabs-ios .tab-button:hover:not(.disable-hover), .tabs-ios .tab-button[aria-selected=true] {
color: black;
border-top: 1px;
border-top-color: blue;
}
.tabs-md .tab-button:hover:not(.disable-hover), .tabs-md .tab-button[aria-selected=true] {
color: #0A0A0A;
border-top: 1px;
border-top-color: blue;
}
.tabbar .tab-button-icon, page-tabs .tabs-ios .tab-button-icon, page-tabs .tabs-md .tab-button-icon {
background-repeat: no-repeat;
background-position: center;
height: 12vw;
width: 14vw;
}
.tabs-ios .tab-button-text {
margin-top: 0;
margin-bottom: 1.5vw;
min-height: 11px;
}
.tabs-md .tab-button-text {
margin-top: 0;
margin-bottom: 1.5vw;
min-height: 11px;
}
.tabs-ios .tabbar {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-top: 1px solid #0070BA;
background: #f8f8f8;
}
.tabs-md .tabbar {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-top: 1px solid #0070BA;
background: #f8f8f8;
}
}
i used ion-tab but still not visible in bottom iphone x only.
1 Like
bro just use
<ion-tab-bar slot="top">
ur issues will be solve in iphone x and all phones
keep helping others
you might have better luck generating an ionic project with the tabs template, and add this sidemenu code to the app.html/ts of that project. you need a tabs.page that holds only the ion-tabs elements and then each page will be routed to from that