Mobiscroll components hanging in the middle of the page

Page layout & navigation
1

I try to type something the keyboard pops up and bottom navbar goes on top of the keyboard.

when i hide the keyboard using the device back button, the keyboard goes off and the bottom navbar stays hanging in the middle of the page.

Screenshot_20181129-202048_Chrome
Screenshot_20181129-202048_Chrome1080×1920 121 KB

thanks

2

Hi there,

Thanks for reaching out!

I tested the navigation component, but for me the issue which you reported is not occurring.

I will need to ask some more details about your usage, which might help me to reproduce the problem:

  1. Is this behavior occurring in the device’s browser or only in webview?

  2. Does this issue occurring on other devices as well? Also can you please share on which device are you testing on and which OS running on it?

  3. Are you using any cordova or other keyboard plugin?

Thanks & regards,
Szilard

3

Hi Szil,

this is occurring only on PWA.
I’ve tested this on oneplus 6t and Samsung C7Pro. I’ve seen this occurring on both the devices.

on oneplus we are using gboard and on samsung its a samsung keyboard.

FYI, this a react application

4

Hi there,

Thanks for the details!

I tested the Bottom navigation inside a react PWA but unfortunately I couldn’t reproduce the problem. I was testing on an Android 8.0 (oreo) device.

If you could share a working example where this issue occurs that would help me to track the issue more faster.

Thanks & regards,
Szilard

5

Hi Szili,

took some additional feedback from QA and reproduced in the following example.

repo: https://github.com/jaynandyala/hanging-menu
app: http://hanging-menus.herokuapp.com/

steps to reproduce:

  1. open the url and tap add to home screen.
    2.open the app from home screen.
  2. tap on the input or select. here you can see the bottom bar is hidden under the keyboard(issue one).
  3. try to scroll down. now the bottom bar shows up on top of the keyboard.
  4. use device back button to hide the keyboard. the bottom navbar stays there in the middle of the screen.

if you are not able to reproduce. let me know.

thanks
Jay

1 Like
6

Hi there,

Thanks for the example! :+1:

It helped me to reproduce the problem. The only difference between my working test project and yours was the display property in the manifest.json file. For me it was set to standalone and for your to fullscreen.

It looks like there are some resize and scrolling issues inside the chrome browser when the display property is set to full screen. I find the following threads: stackoverflow, chromium 453259, chromium 704070

So the Mobiscroll components were not working for you correctly inside the PWA because of those issues.

If you change the display property to standalone in your manifest.json file it should solve the issues.

Please let me know if this helps!

Best,
Szili