iOS Cordova Safari - keyboard makes floating button dissapear - ios

Question

I am working on a project with Cordova, Ionic v1, and AngularJS 1.5. cordova-ios v 5
I have a floating button in my project. It works great for everything except when I have a form page with a text input. When the iOS keyboard appears my floating button dissapears. It works fine on Android.
Here is my css:
.floating-button {
position: fixed;
bottom: 20px;
z-index: 9999;
right: 20px;
border-radius: 50%;
height: 60px;
width: 60px;
border: none;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
color: white;
font-size: 22px;
}

Answer 1

You can do something like this to overcome the issue
Use keyboard plugin and on keyboard open and close change the css value of bottom, So on keyboard open it will automatically move floating button to up and on close move to down
cordova plugin add cordova-plugin-ionic-keyboard --save
//Keyboard will be shown
window.addEventListener('native.keyboardshow', keyboardShowHandler);
function keyboardShowHandler(e){
console.log('Keyboard height is: ' + e.keyboardHeight);
$(".floating-button").css("bottom", e.keyboardHeight+"px");
// You can use IONIC properties for this and change value as per your requierment
}
//Keyboard will hide
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardHideHandler(e){
$(".floating-button").css("bottom", "20px");
}