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

Navigation
0

I'm developing a responsive page that has a search field at the beginning and in the footer two buttons with absolute positioning, on mobile devices after clicking the input the keyboard is displayed and pushing the buttons up, is there any way to prevent this? How do I keep the buttons fixed?

    
asked by anonymous 26.02.2018 / 23:05

1 answer

1

Change / add styles from div .principal to: 

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

And of div of buttons: 

div.footer-buttons{
    bottom: 0;
}

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

What will these changes do?

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

Alternative way via jQuery:

With this method you will not need to make the CSS changes above. The code will hide the buttons if the screen is too short to fit them (when you open the keyboard on the device, much of the height of the screen 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>
    
27.02.2018 / 02:45
ExpandableListView - change background color header title group Error storing byte in mysql db