<ion-footer> / <ion-footer-bar> not showing up on iOS but works in Android

Ionic Framework ionic-v3
1

Both show up just fine on android and browser emulator, but after building for release and running on the iOS emulator in xcode, no footer shows up.

  • I have tested multiple contents/css/minimal and multiple devices on the emulator.
  • I have run sudo npm update
  • I have run sudo npm install -g ionic@beta

Would anyone be able to point me in a direction of why this is not working?

1 Like
2

Also everything seems to be updated:

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.1.0-beta.3
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 8.0 Build version 8A218a

The app was made a few months ago and Iā€™ve noticed some file structure differences in a new project - could this be the reason? If so, could anyone point me in a direction of where to look without building the whole app again in a newly created app?

Note: ion-footer does show up in a newly created app

3

Still running into dead ends with this, so any help would be appreciated.

I have also tried:

  • Changing the z-index in the CSS
  • Iā€™m running sudo ionic build ios --release to create the project to test in xcode
  • Checked the css in google chrome developer tools in ionic serve, but there doesnā€™t seem to be anything irregular (The footer shows up just fine here)
4

How does your code look alike? Do your ion-footer element find place after ion-content?

From Beta10 this is the way to do it, maybe there could be your problem?

See change log 2.0.0-beta.10 (2016-06-27)

5

And if yes, when you debug in chrome and simulate an iOS terminal size, do you see your footer?

6

Thanks for your reply, yeah my ion-footer is outside my ion-content. Currently something like:

<ion-navbar>
    ...
</ion-navbar>
<ion-content>
    ...
</ion-content>
<ion-footer>
    ...
</ion-footer>
  • I also tried deleting ion-navbar completely and the footer still does not show
7

Iā€™m not 100% sure what you mean by iOS terminal size, but when I run ā€˜ionic serveā€™ and test different phone sizes (iphones included) the footer does show. It shows up for both on/off device mode

8

Iā€™ve also tried:

  • ionic platform rm ios and then adding it again
  • made sure every file has read/write permissions
9

Maybe you could try to remove all your custom css for a test to see if the problem doesnā€™t come from an interpretation of the style?

Sometimes ios still render the style differently than the chrome debuggerā€¦maybe something brokes your footer on ios?

Just an idea

10

Yeah sorry, that is what I meant by minimal. I have tried no custom css and playing around with a few values to try and make it visible but with no luck

11

:frowning:

and maybe a minimal html ?

like

<ion-footer>
    HELLO
 </ion-footer>

with css

ion-footer {
  background-color: red;
  height: 50px !important;
  min-height: 50px !important; 
   position: fixed  !important;;
   top: 100px  !important;
  left: 25px  !important;
}

you know something like that just to try to ā€œforceā€ to see it?

12

I tried your code with:

<ion-content>
</ion-content>
<ion-footer>
    HELLO
</ion-footer>

as the HTML, and as you suggested in the CSS, a red box with the text does show up on the emulator in the top left quadrant of the emulated device. Trying the stripped version with no custom css shows up in browser but not the emulator.

13

So it means that somewhere a piece of style is added or interpreted differently in the emulator, if I understand correctly.

Itā€™s suprising that when you remove all custom css you still donā€™t see your footer

Well then, maybe someone else have got an idea or maybe have you check if there is a bug about that in the github of ionic?

Otherwise you still good ā€œforceā€ you footer to find place at the bottom by customizing the css as you just tried, but that would not be a really beautiful way to do it I guess