Buttons positioned at the bottom of the page go up when the mobile keyboard appears

Asked

Viewed 200 times

0

I am developing a responsive page that has at the beginning a search field and at the footer two buttons with absolute positioning, on mobile devices after clicking the input the keyboard is displayed and pushes the buttons up, is there any way to prevent this? How to make the buttons remain fixed?

javascript jquery css css3

  • Could [Dit] the question by elaborating a [mcve]?

  • Have you tried with position: fixed; ?

  • the following url: http://staging.newcore.com.br/passoponto

  • Fixed has the same behavior as Absolute

1 answer

1


Change/add the styles of div .principal for:

.principal{
    height: 100%;
    min-height: 400px;
    position: relative;
}

And of div button:

div.footer-buttons{
    bottom: 0;
}

And put the div button (div.footer-buttons) at the end of div .principal, since the buttons are only links and do not use the form.

What these changes will do?

Will set a minimum height on div .principal of 400px and the buttons will always be on bottom of div, so that when the keyboard appears and the screen becomes smaller than 400px height, the buttons will not rise.

Alternative form via jQuery:

With this method you will not need to make the CSS changes above. The code will hide the buttons if the screen gets too short to fit them (when opening the keyboard on the device, much of the screen height is occupied by the keyboard) and will show them again when there is space (when closing the keyboard). Just add the code:

<script>
$(window).on("resize", function(){
  if(window.innerHeight < $("a.btn.btn-success.btn-lg.green-button").offset().top+120){
     $("div.footer-buttons").hide();
  }else{
     $("div.footer-buttons").show();
  }
});
</script>

Browser other questions tagged javascript jquery css css3

You are not signed in. Login or sign up in order to post.