Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AppShell Navbar footer hidden for mobile users with address bar on top

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

As mobile browsers implement vh units as the height of the screen the bottom part of the Navbar is not visible unless you manually scroll.

Footer not visible

photo_2022-04-03_08-59-45

Footer visible after scrolling

photo_2022-04-03_08-59-45--2-

unknown

In which browser did the problem occur

Any mobile browser with address bar on top

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/beautiful-water-4ipk7d

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

credits to @mattrunyon

Adding sx={{ bottom: 0, height: "auto" }} to Navbar

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

rtivitalcommented, Aug 12, 2022

Fixed in 5.1.4, Navbar now has bottom: 0 css property, we cannot set height to auto though as there are header and footer height dependencies in css variables. Height can be set with corresponding prop: <Navbar height="auto" />

1reaction

rtivitalcommented, Apr 3, 2022

Thanks for reporting and investigation

Top Results From Across the Web

AppShell - Mantine

Responsive shell for your application with header and navbar. ... AppShell, Header, Footer, Aside and Navbar components include bare minimum default styles ...

NET MAUI Shell flyout - Microsoft Learn

Learn how to customize and control a .NET MAUI flyout, which is the optional root menu for a .NET MAUI Shell app.

CSS - stick to bottom of iOS Safari when scrolling

The footer will always stick to the bottom of the page and when the iOS nav bar is visible, it positions right above...

Developing Applications with Oracle JET

Typical Workflow for Working with the Oracle JET User Interface ... templates and scripts for a hybrid mobile application that uses a nav...

sitemap.xml - Material Design for Bootstrap

... .com/support/general/cannot-read-property-top-of-undefined-in-mdb-js/ ... /general/nav-collapse-on-click-hide-mobile-menu-after-click-on-menu-item/ ...