Comments (11)
For those of you who want to get it to work for iPhone X.
First install the latest statusbar plugin (only necessary before version [email protected]).
ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar
Use this CSS instead of @danielehrhardt's
// Ionic Super Tabs iOS + iPhone X Fix
.ios .ion-page,
.ios .modal-wrapper > .ion-page {
ion-header.header-ios > ion-navbar.toolbar-ios.statusbar-padding {
padding-top: calc(4px + 20px);
padding-top: calc(4px + env(safe-area-inset-top));
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
min-height: calc(44px + 20px);
min-height: calc(44px + env(safe-area-inset-top));
ion-title {
padding-top: calc(4px + 20px);
padding-top: calc(4px + env(safe-area-inset-top));
height: calc(44px + 20px);
height: calc(44px + env(safe-area-inset-top));
min-height: calc(44px + 20px);
min-height: calc(44px + env(safe-area-inset-top));
}
}
super-tabs.tabs-placement-bottom super-tabs-toolbar ion-toolbar.toolbar {
padding-bottom: env(safe-area-inset-bottom);
}
}
I've also added those lines to get proper spacing in landscape mode for the content
ion-app.ios .scroll-content {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
from ionic-super-tabs.
It is on a real device and on Ionic Serve Lab
I just tested it on Ionic Serve Lab using version 2.6.0 and it looks fine. It might be fixed in the new release? can you please check and let me know.
from ionic-super-tabs.
yes seems to be fixed. Thank You!!
from ionic-super-tabs.
Hello, I just started using your project today. I'm still getting this issue in both lab and on my actual device.
Some version info from my package.json: (i can upload more if needed)
"ionic-angular": "3.3.0",
"ionic2-super-tabs": "^2.6.2",
from ionic-super-tabs.
So I did some digging, it looks like its about 20px off. There is a css rule that is being applied to nav bars, but its very specific and since your new tabs doesnt have the ion-tabs attribute it doesn't get the styling applied. Its adding 20px to the height of the navbars it looks like.
Here's some screenshots and the actual super long and specific selector. NOTE: I just switched to material for all platforms, but it still has the issue. I'm sure there is a similar css selector for ios
.md ion-nav > .ion-page > .toolbar.statusbar-padding:first-child,
.md ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child,
.md ion-menu > .menu-inner > ion-header >
.toolbar.statusbar-padding:first-child {
padding-top: calc(20px + 4px);
min-height: calc(56px + 20px);
}
I just went in to my app.scss file for now and added the following:
// fix for super-tabs on ios
.md ion-nav > .ion-page > .toolbar.statusbar-padding:first-child,
.md ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,
.md super-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.md super-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,
.md ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child,
.md ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
padding-top: calc(20px + 4px);
min-height: calc(56px + 20px);
}
.ios ion-nav > .ion-page > .toolbar.statusbar-padding:first-child,
.ios ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios ion-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios ion-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,
.ios super-tab > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
.ios super-tabs > .ion-page.tab-subpage > ion-header > .toolbar.statusbar-padding:first-child,
.ios ion-menu > .menu-inner > .toolbar.statusbar-padding:first-child,
.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
padding-top: calc(20px + 4px);
min-height: calc(44px + 20px);
}
from ionic-super-tabs.
@cjdreiss
My solution is much smaller is this not working?
// Ionic Super Tabs iOS Fix
super-tabs-container {
ion-header {
.toolbar {
padding-top: calc(20px + 4px);
min-height: calc(44px + 20px);
.title {
padding-top: 20px;
height: calc(44px + 20px);
min-height: calc(44px + 20px);
}
}
}
}
from ionic-super-tabs.
@danielehrhardt it looks like it would work. I didn't try yours in the first place because I saw that 2.6 was thought to have fixed it.
Then after doing some debugging I saw all the selectors that Ionic was using so I figured it would be best to just add the super-tab/s to the list and do what is done in the framework.
from ionic-super-tabs.
hi @trytuna your fix isn't working anymore on iPhone X (it works fine for other iOS devices), this is how it looks.
from ionic-super-tabs.
I've updated my last post. constant is deprecated since iOS 11.2 env should be used instead.
from ionic-super-tabs.
thanks for the update!!
from ionic-super-tabs.
A huge thanks trytuna, you saved my day !
from ionic-super-tabs.
Related Issues (20)
- tab indicator is not located correctly in firefox when padding exists
- ReIndexTabs undefined issue renders the tab blank HOT 2
- Super Tabs Toolbar pushed up when keyboard is activated HOT 1
- Need help on Super tab containing Table with horizontal scrollbar and fixed column HOT 2
- How to place super-tabs inside ion-toolbar HOT 2
- Framework Delegate is Missing Zone <root> (ion-nav root component not showing in browser) HOT 2
- When i prefetched new tabs list and concat it to the current tabs list the tab toolbar scrolls back to the last selected tab.
- How to change color from indicator and icon on the app?
- in 7.0.8 Version - Its throwing error as Can not read Property 'TransitionDuration' of Undefined. HOT 1
- Angular 10 || 11 and Ionic 5: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s) error HOT 1
- Change tab programmatically. activeTabIndex not work.
- There isn't any props to disable ion-ripple-effect HOT 6
- Lazy loadingn not working - unloadWhenInvisible doing nothing HOT 2
- Tab content become empty when change tabs. Happens only on iOS 14.5 upwards
- super-tab-button animation slides from top on load
- Super Tabs - how to pass page to [root] correctly? HOT 1
- Having two supertabs pages, how to go from first page to second page programmatically?
- ion-refresher doesn't work in multiple tabs
- *ngIf and *ngOf directives not working
- not working on latest ionic v7.1.1 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-super-tabs.