0

When I'm developing in the responsive view of a browser (e.g. Firefox: iphone X) everything fits perfectly, but when I change to the iphone X browser (Safari or Chrome) the content goes behind the browser bottom menu, and I need to scroll to see the content.

Is the Grid not taking in consideration the viewport size minus the bottom menu size of the browser?

Any hint to overcome this subject?

Thanks in advance.

PJP
  • 33
  • 4
  • Do you have a sample to review? It can be difficult to know what to suggest by this alone. Stackblitz is great for making demos https://stackblitz.com/@clr-team – Jeremy Wilken Feb 25 '20 at 21:55
  • Thanks, I will prepare the code to run in Stackblitz, – PJP Feb 25 '20 at 23:05
  • Please see the link for Stackblitz: https://clarity-design-grid-responsive.stackblitz.io/ . If we open the link in the desktop browser the bottom menu bar will be visible, but in a mobile (iphoneXS, 7, ...) the menu bar is hidden by the browser bottom menu. – PJP Feb 26 '20 at 10:50
  • To access to the code https://stackblitz.com/@lnkpaulo. – PJP Feb 26 '20 at 10:57

1 Answers1

0

I managed to have a workaround, not the ideal solution but solves the issue.

The challenge in the mobile environment, to have a fixed bottom menu always visible, is due to the property height: 100vh in the .main-container wrapper. Then what was the workaround?

Was added in styles.css to define a reference height height: 100%

html, body {
  height: 100%;
}

and in app.component.css

.main-coontainer {
  height: 100% !important;
}

... and it's done. See the example at stackblitz.com/edit/clarity-design-grid-responsive.

PJP
  • 33
  • 4