Ionic view with header, subheader tabs and footer is not working

ionic-v1
1

Hello Ionic Team

I am trying to build a layout with main navbar, then subheader, tabs and at the bottom booter bar.
I want custom height on the subheader bar. Currently the height of subheader bar is 44px. I want the height to be atleast 90px.

Codepen below

In the above pen the content is not exactly below the tabs.

Also the footer bar is not shown.

How to resolve this problem ?

2

for sub header and tabs add the following classes respectivly

.custom-height{
  min-height:90px !important;
  
}
.bar-sub-cust{
  top:90px !important;
}

for footer, its actually being displayed but not visible for some reason… looking into it, will get back

<ion-content padding="true" class="has-footer">

has-footer class needs to be added to ion content under which the the footer-bar would be present

adding style of bottom:40px on bar-footer will show it in codepen aswell

3

Hello harshitgoel96

Isn’t there ionic way of doing it ?
I mean what about the devices with smaller screens or larger screens.
Kindly look into footer problem. That is what I can’t able to figure out till now. I mean the footer top position is set to some px. If I set substract the height of gap between tabs and content to that top position then footer will be visible.

Setting custom styles on footer and header won’t it create problem on devices with multiple screen sizes and on different platforms

4

ionic way of this is not available (at lease in my knowledge)

what you should look at is the responsive web design… and use media query

footer would be set wit bottom css property… and same margin-bottom should be set on ion-content

5

Any update on this. I’m having a similar issue. Footer was displaying fine on a certain page. I added in a modal to a different page and then suddenly it stopped displaying.
Not sure if the modal is relevant cause I think I changed all my code back and it still isn’t displaying.