Button coming up!

Question

See the output......click “Setting”, now click any input field....the “apply“ button is coming up...why!? And is there any solution for this?
https://code.sololearn.com/W3ydsplgP5ss/?ref=app

Answer 1

PassionateCoder ya......so is there any solution?

Answer 2

PassionateCoder no no...I am saying that after you click any input field....the button is coming up.....I want that the button remains at bottom even after you click input field

Answer 3

PassionateCoder I want the button to remain at the bottom

Answer 4

How about this?

https://code.sololearn.com/WRhQvRJi41c9/?ref=app

Answer 5

This seems to be an annoying bug in phones. The softkey pushes the layout up by decreasing the height of the page. Several discussion in various forums can be found after some Google search.
The css may not be clean since I followed multiple answers, but it finally seemed to work. Not sure of the behavior for iPhone, since I'm using an Android phone. There seems to be a difference in the softkey influence on webpages for iPhones and Android devices.

Basically, you set the html, and body height and also set min-height to 100%

html, body{
position: relative:
height:100%;
min-height:100%;
}

button{
position: absolute; ??? not sure...
bottom: 4%; or whatever...
}