search

akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.19k stars 7.94k forks source link

Mobile Device Issue Only : Closing Modal Dialog, hiding upper portion of content behind fixed header #5659

Open sushilpatil84 opened 4 years ago

sushilpatil84 commented 4 years ago

Issue type

I'm submitting a ...

Mobile Device Issue Only : Closing Modal Dialog, hiding upper portion of content behind fixed header. High priority issue, as whole site navigation hides upper portion of content behind fixed header once modal dialog close.

Current behavior: Scroll down some content, open dialog and Closing modal dialog, and when we scroll up, we find hiding some upper portion of main content behind fixed header menu. Navigate to any page, and we will find the same issue at every page.

Expected behavior: Closing modal dialog, and when we scroll up, should not hide main content behind header menu.

Steps to reproduce:

  1. Open this link "https://www.akveo.com/ngx-admin/pages/modal-overlays/dialog" in mobile device.
  2. Scroll down some content and open dialog.
  3. Close Modal Dialog
  4. Scroll up at top again
  5. Some portion of the main content hides behind header menu.

Other information:

Node Version: 12.16.1 and npm Version: 6.14.4 OS: Windows (10). Browser: Chrome/Edge - Issue Reproducible Firefox - Issue Not Reproducible

Current Behaviour

blankstar85 commented 4 years ago

I'm not able to reproduce this on chrome. image

iconixws commented 4 years ago

It will reproduce only on mobile device, I checked with three different mobile device. Open chrome and check on mobile.

iconixws commented 4 years ago

Can you please someone take a look on this, as this bug leads to fail complete site.

Once again Steps to reproduce:

  1. Open this link "https://www.akveo.com/ngx-admin/pages/modal-overlays/dialog" in mobile device chrome/edge browser.
  2. Scroll down to last dialog box, "Dialog Header: Return Result From Dialog", open dialog and close dialog.
  3. Scroll up at top again and you will see some portion of the main content hides behind header menu as per attached image
blankstar85 commented 4 years ago

@iconixws Given your updated steps to reproduce, ( which is always helpful in the begining) i do see this now. I was testing the other dialogues and couldn't reproduce on a mobile device.

this is caused by the input (keyboard) on a mobile device which is lacking in the desktop version. It pushes the view up and doesn't set it back. The window dialogue with form doesn't do the same thing, so that might help you if you want to look at it and submit a pr.

I'm sure the developers will get to it when they can, If i can figure it out i'll submit a pr.

iconixws commented 4 years ago

@blankstar85 Hello Sir, I fixed this issue by removing "windowMode" in one-columns-layout, two-columns-layout, three-columns-layout component file.

aliomattux commented 3 years ago

I have this exact problem. I wrote a WM app for android device and the issue is tied to the keyboard. In dev, I couldn't reliably produce the problem. I also do not use dialog popup or modal. It happens when the keyboard is pulled up but it has to be some specific manner. In my mobile app, I use the header for buttons which get covered completely and makes the app unusable. Each time it happens user must refresh entire page to fix. Very troublesome issue. I don't understand what windowMode is and how removing it will fix. If you could put some additional info about the fix that would be helpful