search

nkbt / react-height

Component-wrapper to determine and report children elements height
MIT License
180 stars 27 forks source link

Height reported is not correct #11

Closed jlevycpa closed 8 years ago

jlevycpa commented 8 years ago

I'm seeing a strange issue where the height reported is too small. I'm just trying to calculate the height of a simple Bootstrap Alert component:

        <ReactHeight onHeightReady={(h)=> console.log('height is '+h)}>
            <div className="alert alert-success">
              <strong>Testing!</strong>This is what an alert would look like.
            </div>
        </ReactHeight>

I'm getting back a height of 18, though the actual height is closer to 50 with margins and padding. I tried to implement the logic of React Height myself, and was seeing similar behavior when querying the offsetHeight of the DOM node in a lifecycle function like componentDidMount. However if I checked the DOM node height inside of a setTimeout (even with a timeout of 0), I got the correct height.

It seems like Chrome won't give the height until after the parent or maybe even the full page is rendered for some reason.

Have you ever run into this?

nkbt commented 8 years ago

If you use paddings or margins, height will not be correct since it reports only height. If you then load css that adds paddings - react-height will not know about it. That is intentional. For performance. If you are not rendering 10000 collapsible rows in a table, I would recommend to switch to https://www.npmjs.com/package/react-element-resize instead. It gives you optionally debounced dimensions/offsets and is really accurate. We use it for all our layout elements (not for big table rows obviously).

Cheers!

nkbt commented 8 years ago

Related to #5

nkbt commented 8 years ago

Related to #9

jlevycpa commented 8 years ago

You are absolutely right. I don't know why I didn't think of that. I forgot that I was using the Webpack style loader to dynamically inject css instead of having a static css file linked to my HTML template. The Bootstrap css was getting injected after all of the javascript had already executed. I switched the order of my entry points in my Webpack config (so the css entry point is before js) and it works perfectly.

Thanks for pointing me in the right direction!

nkbt commented 8 years ago

I had the same problem at some point. Happy it helped!