1

I am working on a (PWA) app using React, testing for the mobile layout has been mostly done with the browser dev tool's responsive design mode but after playing around with the application on a real device I noticed the browser toolbar takes up some space from the actual application and can cause certain elements to be only displayed properly when the user scrolls down and hides the toolbar. Since this is a webapp I would like the experience on the browser to match as close as possible a native experience, but I haven't figured out a way to deal with the overlaping browser toolbar.

Used libraries:

  • React.js
  • Tailwind.
  • React Router DOM.

My app has a sidebar for navigation which is turned into bottom tabs using row and rever-column for flex direction. And the navigation bar is not displayed on the signin screen.

const App = withRouter(({ location }) => {
  return (
    <div className="flex flex-col-reverse h-screen w-screen md:flex-row">
      {getNavBar(location)}
      <Switch>
        <Route exact path={["/signin", "/"]}>
          <Signin />
        </Route>
        <Route exact path="/explore">
          <Explore />
        </Route>
      </Switch>
    </div>
  );
});

Since this is a flex container I though using flex-1 for the "content" would be enough to fill up as much space needed and accommodate for the navigation bar (this works fine for the desktop version) but it seems like the browser toolbar is not "considered" in the layout so scrolling is needed.

<div className="flex flex-col w-full flex-1">
{
    // Some other stuff
}     
</div>

This is the result of the previous code where the entire screen needs the user to scroll down to view the whole app layout.

enter image description here

Jeremy
  • 1,447
  • 20
  • 40
  • 2
    Does this answer your question? [CSS3 100vh not constant in mobile browser](https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser) – chojnicki Apr 15 '21 at 02:18
  • It does thank you! I thought I was crazy for a moment or maybe this was a problem with styling. I used this React package to fix this: https://www.npmjs.com/package/react-div-100vh – Jeremy Apr 15 '21 at 02:58

0 Answers0