How to hide the bottom toolbar while keyboard is on

while typing in input field the bottom toolbar appear on the top of the keyboard. i want to hide toolbar while typing in input field… but how?

Hi i use Vue js.
My solution was using a plugin.
ionic-plugin-keyboard


its deprecated now.
You should use cordova-plugin-ionic-keyboard if you choose the plugin solution

window.addEventListener('native.keyboardshow', this.keyboardShowHandler)
window.addEventListener('native.keyboardhide', this.keyboardHideHandler)

// Hide/Show toolbar
keyboardHideHandler(e){
  this.$$(".toolbar").each((i,v)=>{this.$$(v).show()})
},
keyboardShowHandler(e){
  this.$$(".toolbar").each((i,v)=>{this.$$(v).hide()})
}

Never use it, but is suggest to go with f7 solution:

app.toolbar.hide(toolbarEl, animate)
app.toolbar.show(toolbarEl, isAnimated)

Doc:
https://framework7.io/docs/toolbar-tabbar.html#toolbar-app-methods

so when the user click/tap the input you hide the toolbar.

1 Like

Hi,
Thanks for the tips

But what’d you mean about using vue?
I’m using vue-cli and don’t know that how to install this plugin??
are there anything like this to use in npm for importing to my vue project or not?

hi,
this is a cordova/phonegap/ionic plugin. Is yor project based in cordova? if not, this is no useful for you