Search code examples
ionic-frameworkionic3admobcordova-admobionic-tabs

ionic 3 & AdMobFree: Tabs behind banner

I have made an app in ionic 3 and configured an AdMob banner at the bottom which works (almost) perfectly. Whenever I open the keyboard and close it afterwards, my tab menu at the bottom just slips behind that AdMob banner.

Screenshots: How it looks at the beginning and how it should be

Keyboard is open

Keyboard close and the tab navigation is gone

I already tried to add margins or change the height of app-nav but all of this just resulted in weird, unwanted behaviour.

On the settings page, I also have a button which triggers the EmailComposer, when I close that Email afterwards, the exact same thing happens again.

When the AdMob ad is changed, the tabs just jump right back to their original location (where they should be). I also tried destroying/hiding the ad and then re-showing it when the keyboard is closed but this also, didn‘t change anything about the behaviour.

Solution

  • Solved it by subscribing to the keyboard didHide event and hide the banner for 100ms and re-show it just like here (app.component.ts):

            keyboard.didHide.subscribe(() => {
          admob.banner.hide().then(() => {
            setTimeout(() => admob.banner.show(), 100);
          });
        });