I’m building an Ionic app that uses striped style tabs on some views with subheaders and other connected views that have subheaders but not tabs. Everything looks good in browser/android builds. On iOS everything looks fine until I access a view with tabs before I access a view without a tab. The subheaders in the view without are also assigned the ‘has-tabs-top’ class automatically and as a result are dropped down. The result is for example that this view:
Ends up looking like this view:
The CSS involved looks like this:
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader, .platform-ios.platform-cordova:not(.fullscreen) .has- header, .platform-ios.platform-cordova:not(.fullscreen) .tabs-top>.tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader, .platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .tabs-top>.tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
top: 64px;
} - ionic.app.miss.css:1:154334
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top {
top:113px;
} - ionic.app.miss.css:1:154002
Subheader’s that ARE part of a tabbed view coded:
<ion-header-bar class="bar-subheader has-header-tabs item-input-inset">
and once built display as:
<ion-header-bar class="bar-subheader has-header-tabs item-input-inset bar bar-header disable-user-behavior has-tabs-top">
Subheader’s that are not part of a tabbed view are coded as:
<ion-header-bar class="bar-subheader item-input-inset">
and once built display at first as:
<ion-header-bar class="bar-subheader item-input-inset bar bar-header disable-user-behavior">
but after a tabbed view has been loaded they display as:
<ion-header-bar class="bar-subheader item-input-inset bar bar-header disable-user-behavior has-tabs-top">
Is there a way to prevent a the ‘has-tabs-top’ class being added to specific subheaders? My workaround is to apply another specific class to these subheaders to enforce their heights on iOS but it seem inefficient.