mvasin / react-div-100vh Goto Github PK

I visited https://react-div-100vh.vercel.app/ using my pixel 7 pro with Chrome. On initial load the after visiting the link the green div is not viewable, after tapping on screen the green div appears at bottom of screen.

I've found the following issue on iOS Safari, landscape mode:

I've deleted the bottom element containing the text "Something else goes here after the full window height div....", but a scrollbar is still present in browser.

Screenshots attached:
https://imgur.com/a/fFXrHft

.... or live demo on: https://andreivictor.ro/div100/.

I really want this to work, but I tried using it in my Gatsby JS app and it doesn't seem to be doing the job. Here is my layout code:

export default ({ children }) => (
  <Div100vh>
    <StaticQuery
      query={graphql`
        query {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      render={data => (
        <AppLayout>
          <Navigation>
            <NavLink to={`/`}>
              <H3>{data.site.siteMetadata.title}</H3>
            </NavLink>
            <NavLink to={`/products`}>
              Products
            </NavLink>
            <NavLink to={`/features`}>
              Features
            </NavLink>
            <NavLink to={`/about`}>
              About Us
            </NavLink>
          </Navigation>
          {/* <PageTransition> */}
            <MainContent>
              {children}
            </MainContent>
          {/* </PageTransition> */}
        </AppLayout>
      )}
    />
  </Div100vh>
)

I tried putting the component around both the whole layout, including the , which did not work, and also the Component, then tried running it on my iPhone, and neither worked for me. Is there anything about using this component I should know about? Has it ever been tested with a Gatsby App at all?

It would be awesome if this can work for me, as I've been dealing with this issue for over a year now, and it's no fun at all.

Hi,

Been trying for months but can't get your component to work properly in my Gatsby JS React app. I'm thinking now, however, that maybe I need to do something like this:

@media (min-width: 50rem) {
  grid-template-rows: 20rvh 5rvh 5rvh 50rvh 20rvh;
  grid-template-columns: 1fr 3fr;
}

...in which I am using your Real Viewport Unit measurement as declarations of the grid-rows of a grid layout. Is something like this even possible? I'm using Viewport Units inside a styled-component, like so:

const App = styled(animated.div)`
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 20rvh 70rvh 10rvh;
  grid-template-columns: repeat(3, 1fr);

  @media (min-width: 50rem) {
    grid-template-rows: 20vh 5vh 5vh 50vh 20vh;
    grid-template-columns: 1fr 3fr;
  }
`

...in combination with react-spring (hence the animated.div) inside of a Gatsby JS React app. It's all very convoluted, I know, but for me to even begin to use your component properly I need to do some fancy stuff in the gatsby-browser.js file, like so:

import React, { useEffect } from 'react'
import Div100vh from 'react-div-100vh'

const WrapperComponent = (props) => {
  useEffect(() => {
    window.onresize = function() {
      document.body.height = window.innerHeight;
    }

    window.onresize(); // called to initially set the height.
  }, []);

  return props.children;
}

export const wrapRootElement = ({ element }) => { 
  return (
  <WrapperComponent>
    <Div100vh>
      {element}
    </Div100vh>
  </WrapperComponent>
  )
}

I noticed in your docs that you recommend using a style tag and passing the rvh units in as an object, but I'm curious to know if it's possible to do what I have described above.

If you are interested, here is the issue in Gatsby's repo where some nice people are trying to help me out with this as well:

gatsbyjs/gatsby#15049

Any thoughts that you could share regarding this matter would be very much appreciated.

Thank you! XD

First, thanks for creating this!

createRef is only supported as of React 16.3, but the peerDependencies show:

"react": ">15",

It probably makes sense to use the legacy ref callback implementation for the time being. I can probably get a patch together reasonably quickly if you'd like.

Setting 678 but the window is 818.

I'm using gatsby and running into this import error ?
Anyway to get round this.

Could not find a declaration file for module 'react-div-100vh'. 'path/node_modules/react-div-100vh/lib/index.js' implicitly has an 'any' type.

Unfortunately my project is way too large to break down into a example.

Thanks for sharing this component!

For my use I needed to change node.style.height = window.innerHeight + 'px'; to node.style.minHeight = window.innerHeight + 'px';. I don't know how to do this but it seems like passing that down as a prop might be useful?

I found an article: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
Is it could be alternative over it?

Hi @mvasin, how can we update the height as the orientation change from portrait to landscape and vice-versa when using Chrome on iOS? Although it seems like a pretty common scenrio, I couldn't find any related issues posted here. Can you please guide me?

Demo

Detail

When changing orientation from Landspace to Portrait, sometimes the height doesn't change.

But this doesn't always happen, it's really sometimes.
It may be reproduced immediately, or it may not be reproduced unless the orientation is changed many times.

I used next-pwa to make PWA, and [email protected] doesn't have this problem.

Source

Using [email protected]

https://github.com/Takkiii/pwa-orientation-behavior-app

Using [email protected]

https://github.com/Takkiii/pwa-orientation-behavior-app/tree/react-div-100vh/0.6.0

No real issue, just wanted to say that Div100vh is awesome, great idea and well executed, thanks!

Getting this error when using webpack to build. Also using React 16.4.1

ERROR in .//react-div-100vh/lib/convertStyle/convertStyle.js
Module not found: Error: Can't resolve 'jest-get-type' in 'C:\projects\node_modules\react-div-100vh\lib\convertStyle'
@ .//react-div-100vh/lib/convertStyle/convertStyle.js 9:42-66
@ .//react-div-100vh/lib/convertStyle/index.js
@ .//react-div-100vh/lib/Div100vh.js
@ ./~/react-div-100vh/lib/index.js

Websites using react-div-100vh opened via instagram browser (eg. linking the website from IG profile description) are rendered with wrong vertical height (the ig-browser bottom bar overlaps the content etc.).

Hi there! It looks like 0.3.3 is missing the lib/ folder in the tarball on npm. Here's what it looks like installed in the node_modules of my project:

Did you maybe forget to run the lib script before publishing? 🙂

Somehow I cannot get this to work with gatsby, the safari toolbar in iOS is still covering the div. I'm using the FullHeightComponent on my index page within the Layout compontent.

repo: https://github.com/mhedengren/just-a-test

netlify for checkout on phone https://objective-kowalevski-bd15a4.netlify.app/

Am I doing something wrong?

When I shrink the website height by resizing my browser (Chrome Desktop Version 87.0.4280.88) the height (output of the measureHeight function) is sometimes too small by 15px.

This means a 15px tall white bar along the bottom of my site flicks into and out of existence as I shrink the browser.

As I drag the bottom of the window up, every 2nd call to measureHeight returns the incorrect value.

There is no issue when increasing the window height.

The odd thing is if I stop resizing the window once I get a bad value, and then use the console to get the documentElement.clientHeight, I get the correct value. It's almost like the browser hasn't updated the documentElement.clientHeight when measureHeight runs, but then it does so right after.

This does not happen when I activate the device toolbar, switch it to responsive and shrink the height there.

Does anyone else have this issue? I'm not sure if it is a browser bug, something in this library or most likely just something odd with my site.

I'm having a problem with mobile, when you first open the page we have the address bar and the bottom nav bar, and for the it calculates the div correctly to fill the space, but when I try to scroll on the div the address bar hides and the results to a div shorten then it supposed to be. Is there a way to recalculate that height after the address bar is hidden or something similar?

After PR #26, which applies styles on first render, my Gatsby website build process fails with the exception:

failed Building static HTML for pages - 5.299s
error "document" is not available during server side rendering.

   8 | // extracted into a separate module so it's easier to mock with Jest
   9 | function getWindowHeight() {
> 10 |   return document && document.documentElement && document.documentElement.clientHeight || window.innerHeight;
     | ^
  11 | }
  12 | 
  13 | var _default = getWindowHeight;


  WebpackError: ReferenceError: document is not defined
  
  - getWindowHeight.js:10 getWindowHeight
    node_modules/react-div-100vh/lib/getWindowHeight.js:10:1
  
  - Div100vh.js:63 new Div100vh
    node_modules/react-div-100vh/lib/Div100vh.js:63:1

This is because the code to compute window height is now called in the constructor instead of at mount time, which means it runs during SSR builds as well, where window and document are not defined.

The usual solution to this would be to check if window is defined in getWindowHeight (this is the approach Gatsby docs suggest), but this would fail the assertions in convertStyle, so those assertions would need to be removed.

Another approach is to only call convertStyle in the constructor if the DOM is available (by doing the window check above), but then we'd have to call the method again in componentDidMount anyway in order to be isomorphic. This seems to be the preferable approach.

Happy to put up a PR based on guidance.

Hard one to explain, but I have a bug on Android Chrome when using this library with Gatsby, everything works fine but if I navigate to a page that isn't locked to 100vh, scroll down, the android UI bar at the bottom on the screen dissappears, when I nav back to another page from my fixed header, the 100vh page is calculated with the OS UI bar even though it isn't there, leaving a gap at the bottom.

An example can be seen here - https://prb-architects.netlify.app/ - if you navigate to a project from the carousel on the home page, scroll down, then click back in the fixed header at the top, you'll see the bug.

Is there any way anyone knows a workaround for this? It's fine in every mobile browser except Chrome Android

Thanks in advance,
Sam

The as prop doesn't seem to be working correctly. It is rendering a div with an as attribute.

For example.

This

<Div100vh as="main">
    ...
</Div100vh>

Is rendering

<div as="main" style="height: 879px;">
    ...
</div>

Tried to install on a Gatsby V3 website via npm, got 238 line in the log, here they are:

220 timing auditReport:init Completed in 33087ms
221 timing reify:audit Completed in 34348ms
222 timing reifyNode:node_modules/undefined Completed in 125553ms
223 timing reify:unpack Completed in 125553ms
224 timing reify:unretire Completed in 1ms
225 timing build:queue Completed in 35ms
226 timing build:deps Completed in 35ms
227 timing build Completed in 35ms
228 timing reify:build Completed in 35ms
229 timing reify:trash Completed in 0ms
230 timing command:install Completed in 132733ms
231 verbose stack TypeError: Cannot read properties of undefined (reading 'spec')
231 verbose stack at Arborist.[saveIdealTree] (/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:1086:44)
231 verbose stack at Arborist.reify (/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:150:31)
231 verbose stack at async Install.install (/opt/homebrew/lib/node_modules/npm/lib/install.js:150:5)
232 verbose cwd /Applications/MAMP/htdocs/react
233 verbose Darwin 20.6.0
234 verbose argv "/opt/homebrew/Cellar/node/16.9.1/bin/node" "/opt/homebrew/bin/npm" "install" "react-div-100vh" "https://github.com/mvasin/react-div-100vh.git"
235 verbose node v16.9.1
236 verbose npm v7.21.1
237 error Cannot read properties of undefined (reading 'spec')
238 verbose exit 1

NextJS server-side rendering is throwing cause document is not defined in Node.

on iOS 15.0.2 when the footer slides down this rule breaks

https://github.com/mvasin/react-div-100vh/blob/master/packages/react-div-100vh/src/index.tsx#L49

because clientHeight is always the same, innerHeight seems to behave correctly

Zooming breaks the layout on demo page (https://react-div-100vh.netlify.com) on iOS Safari:

Expected would be to keep the same size as without zoom. On Android Chrome I see it working properly.

Just want to share that I'm phasing out rvh units in favour of use100vh React hook and rewrite the whole thing in TypeScript along the way.

See https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

Bug with mobile chrome after change orientation not recalculated correct height. Sorry of my English

Hello all,

Is it possible to apply this library to images? I tried something like this:

<Div100vh as="img" src={logo} style={{ height: '9.43rvh' }}></Div100vh>

The resulting HTML was:

<div as="img" src={logo} style={{ height: '9.43rvh' }}></div>

So no image was rendered.

A feature like this would be awesome.

Hi! Thanks for this incredible component!

I need a similar behavior to height: calc(100vh - 56px);
It's possible?

Thanks

Version 0.5.0 included an index.d.ts file so that the package could be used with TypeScript. However this has gone missing in 0.5.2?

On mobile, the resize event is triggered on input focus (keyboard open), but this should not be the case as it does not make any sense to shift the layout when keyboard is opened.

q2: Why not using orientationchange on mobile devices too ?

this is my package.json

"react-scripts": "1.1.5",
"react-div-100vh": "^0.3.2"

I got this error after run yarn build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

        ./node_modules/jest-get-type/build/index.js:14 

Read more here: http://bit.ly/2tRViJ9

Hi,

Thanks for creating this component! Its working fine when the bottom menu bar is present, but once you scroll it away, the height is not updated to the correct height.

For example:

When you focus into a text field on safari it causes a bunch of additional white space below the full height wrapper. Here are some screenshots. This was done on an ios simulator.

Default	Focused with keyboard	Focused without keyboard

I was thinking perhaps it would be nice to show something to new users explaining that the actual calculation of "rvh" basically boils down to this:

document && document.documentElement && document.documentElement.clientHeight || window.innerHeight

For a long time I used the package without knowing how this calculation was made, but opening up the files really helped.

Recently I needed to set minHeight to calc(100rvh - 100px). However this wasn't possible with the package, so learning the actual expression allowed me to create a listener and get this value myself.

Can you do this kind of calc somehow?

I would like to do 100vh - hero section?

So I tried all 100vh hacks I found, and my conclusion is that native iOS behavior is not fixable.
Every fix has its own quirks, even this one. I am not sure whether it's race conditions in CSS rendering engine or what, but my personal recommendation is to not try to fix iOS Safari anymore. We should not fight with it, we should embrace it in our designs. Btw, when the web app is linked to the home screen, it runs in full-screen without any bars and everything works as I expect.