ons-toolbar gets pushed to the top and disappears when the keyboard is showing on iOS!

[David Hope]

Hello,

I’ve been searching for a while for a solution to this problem and even though others had the same issue but no one actually provided a working solution to this issue!

Basically, the **ons-toolbar **gets pushed to the top and disappears when the keyboard is showing on iOS.

I don’t have this issue on Android. its only the iOS that causes this issue.

I tried the followings and nothing worked so far:

<ons-toolbar style="position:sticky !important;">

and

<ons-toolbar style="position:fixed !important;">

i’m using onsenui - v2.0.0-rc.15

Could someone please be kind enough to advice on this issue ?

a working solution would be appreciated or is this even possible with onsenui at all?

Thanks in advance.

[munsterlander]

Have you tried updating Onsen? It is on version 2.6.1 which is a long way from the rc you are using.

[David Hope]

@munsterlander said:

Have you tried updating Onsen? It is on version 2.6.1 which is a long way from the rc you are using.

No, i haven’t tried updating the onsen. so do you think that this issue only exists in the older versions?

[munsterlander]

@David-Hope Well, so many things have been fixed over the last releases, it’s hard to say. Regardless, it’s hard to go back and try to fix an issue that was a beta release when they are in production release now.

[Fran Diox]

This is Cordova related, check https://stackoverflow.com/questions/13820088/how-to-prevent-keyboard-push-up-webview-at-ios-app-using-phonegap and https://github.com/cjpearson/cordova-plugin-keyboard#keyboardshrinkview

[David Hope]

@Fran-Diox Yeah, i found those before and in fact I tried them (both Javascript solution & the Plugin) but I still don’t get the desired effect!

When I use the Javascript solution that is mentioned in stackoverflow, the webview is jumpy when the input is focused and the plugin causes the webview to stop shrinking…

Basically the desire effect is this:

The ons-toolbar stays in its position which is right at the top of the page and then everything bellow the ons-toolbar (i.e. the page content etc) to shrink as normal.

This is how any other app that i’ve seen do it.