Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229617

Keyboard push footer div above keyboard

$
0
0

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


Viewing all articles
Browse latest Browse all 229617

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>