Ionic-framework: Footer not shown when combinated with ion-tabs

[ck-ws]

Steps to follow:

1. Create a tabbed app
2. Create a tab with ion-content
3. add has-footer="true" and has-tabs="true" to ion-content
4. add a footer below the ion-content with footer component (http://ionicframework.com/docs/components/#footer)

Problem:
Footer won't show because it is hidden behind the tab bar.

Possible Solution:

• add has-tabs as class to footer
• add new CSS:

.has-footer.has-tabs {
  bottom: 93px;
}

• change CSS:
  .has-tabs -> .has-tabs, .bar-footer.has-tabs or change order of source (currently bottom get's overwritten without this change)

CodePen demo (incl. fix):
http://codepen.io/anon/pen/pijke

[mhartington]

Is this what you're hoping to achieve?

http://codepen.io/mhartington/pen/pumtb

[ck-ws]

Yep. Just added an issue so that this (possibly) could be the default in the future.
As can see, I already added the needed CSS in the Codepen (but commented it out).

[gereko3d]

It looks like this issue is still open, in some circumstances.
I noticed that, under _iOS_ (no problems with _Android_) the directive keyboard-attach doesn't work inside a _footer_, when, in my layout, I also have a _tab-bar_. The proposed fix makes the footer and the tab bar appear, but when I focus an input inside the footer, the keyboard is shown, but it covers both the footer and the tab-bar.
Under Android both the footer and the input are pushed up (it would be better if it would be the footer only, but it is not such a big problem).
Any idea about that?

[simran66]

I faced the same problem sometime back and here is the fix that worked for me:
http://www.yourtechchick.com/angularjs/ionic/how-to-use-a-footer-with-ion-tabs-in-ionic/

Hope that helps.

[omid-keihani]

you made by ion view , how can make sub footer with ion tabs ???