Keyboard push footer div above keyboard

Ionic Framework ionic-v3
1

Hi there ,
i am having issue i have submit button at bottom|footer of my page when i type anything in input section keyboard push submit button above …
i have tried many solution but not working
here is my css

.footer{
        background-color: #22c064;
        height: 10%;
        bottom: 0;
        position: fixed !important;
        padding-bottom: 0 !important;
    }
    .footer_div{
        float: left;
        width: 100%;
        margin-top: 2%;
        position: fixed !important;
        bottom: 0 !important;
        padding-bottom: 0 !important;
    }

here is my homepage.html

<ion-content class="bg" >

  <h2 class="register_heading">Registration</h2>

  <div class="signup_div">
       <ion-list style="height:100%; width:100%;" >
          <ion-item>
            <!-- <ion-label >First Name</ion-label> -->
            <ion-input type="text" placeholder="First Name"></ion-input>
          </ion-item>
          <ion-item>
              <!-- <ion-label >Last Name</ion-label> -->
              <ion-input type="text" placeholder="Last Name"></ion-input>
          </ion-item>
          <ion-item>
                <!-- <ion-label >Email</ion-label> -->
                <ion-input type="email" placeholder="Email"></ion-input>
          </ion-item>
          <ion-item>
            <!-- <ion-label >Password</ion-label> -->
            <ion-input type="password" placeholder="Password"></ion-input>
          </ion-item>
        
        </ion-list>
  </div>
    
  <ion-footer no-border class="hide-on-keyboard-open footer">
      <div class="footer_div">
          
          <button class="signup_btn_clr" ion-button full clear (click)="openLoginPage()">Submit</button>
        </div>
  </ion-footer>    
  

</ion-content>

what i have tried ??? in app.module.ts i have placed

scrollAssist: false,
autoFocusAssist: false

but its not working
i have done changes css also like

.keyboard-open .tabs{
        display:none;
        }
      .keyboard-open .has-tabs{
       bottom:0;
       }
       body.keyboard-open .has-footer{	
        bottom: 0;
        }
.keyboard-open .has-footer {
        bottom: 0;
        display: none;
    }
ion-content.content-md:not([padding]) .scroll-content {
    padding-bottom: 0 !important;
}

please suggest any other solution …
looking for help

2

I also got the same problem, then I solve this by using one trick that when keyboard display I hide footer using *ngIf

3

can you elaborate little ?

4

yes add eventlistner in constructor like this

 showFooter=true;
 let self=this;
 window.addEventListener('native.keyboardshow', keyboardShowHandler);
        function keyboardShowHandler(e){
         
           self.showFooter=false;
        }
        window.addEventListener('native.keyboardhide', keyboardHideHandler);
        
        function keyboardHideHandler(e){
            self.showFooter=true;
        }
2 Likes
5

sorry but its look like half code…
i have pasted the same code in home.ts constructor but there are some errors like

showFooter=true; 
window.addEventListener(keyboardshow’, keyboardShowHandler);

red underline at showFooter
and keyboardshow

6

import Keyboard as :
import {Keyboard } from ‘ionic-native’;
declare var window: any;

and declare showFooter above constructor
showFooter=true;

7

its hidden on windows not on android …

8

no its on android I use it my android app

9

i have applied same code but its not working on android

10

are you add showFooter to your footer div in *ngIf ??

11

in your footer just do a simple form with that input or text area field. It just work on the go!