Iphone/Android UI full screen responsive design issue with footer/header and scroll able content

[vinayak12]

Issue type

I'm submitting a ... (check one with "x")

• [X ] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

https://www.akveo.com/ngx-admin/pages/dashboard (cosmic)

Footer is not show in the iphone. We have to manual move the browser to full screen mode. Same issue is seen with header overlapping the scroll-able content when we move from full screen mode to normal mode. I have record the UI rendering issue in video.

https://drive.google.com/file/d/1rMpnYev0-HI578CXADGhJqHu3bYkf8G7/view?usp=sharing (UI issue reproduction step)

Current behavior:

Expected behavior: screen should go to full screen when we scroll to footer or header.

Steps to reproduce: a) footer issue 1) open https://www.akveo.com/ngx-admin/pages/dashboard (cosmic theam ) in iphone 2) scroll to footer.

2) header overlap issue 1) open https://www.akveo.com/ngx-admin/pages/dashboard (cosmic theam ) in iphone 2) go to full screen mode in iphone 3) go back to normal mode. 4) you will see the header is overlapping with scroll-able content

Related code:

A sample application via GitHub

https://www.akveo.com/ngx-admin/pages/dashboard

[vinayak12]

g a ... (check o

Any update on this issue?

[sachin-dane]

@vinayak12 were you able to fix this issue, even we are facing same issue on scroll header gets overlap.

[sachin-dane]

@KostyaDanovsky any update on this issue ?

[nguyenkimkien]

I handle this problem with this piece of code in the styles.scss, hope it help you

::ng-deep {
  @media only screen and (max-width: 575px) {
    body {
      overflow-y: auto !important;
    }
    .scrollable-container {
      height: unset !important;
    }
  }
}