digidem / react-dimensions

[Looking for maintainers]

Home Page:http://lab.digital-democracy.org/react-dimensions/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Component Doesn't Render Until First Resize Event

notsoluckycharm opened this issue · comments

commented

Hello,

I think I might be missing something. It doesn't seem to render my component until the first resize event. Although I cloned the repository and ran the demo - which worked. My code is very similar to the demo, however it's much more complex (as you'd expect :P) I've attached two screen shots.

Before:
https://www.dropbox.com/s/q50gfoh03jt90cw/Screen%20Shot%202016-01-28%20at%205.12.35%20PM.png?dl=0

After:
https://www.dropbox.com/s/dj180ql5hpx1pue/Screen%20Shot%202016-01-28%20at%205.13.00%20PM.png?dl=0

The parent element is rendered in a loop above it. The loop renders an array of dynamic components (it's a survey wizard, data driven so you can re arrange components) but for testing purposes I even hardcoded style={ width: 300px, height: 300px } to the parent to no avail.You see

<div className="question" style=" width: 300px, height: 300px" /> 

and even your boiler plate css of width and height 100%... just no children until the resize.

What am I doing wrong? Thanks!

commented

Turns out it was a css/html gotcha. For anyone else experiencing a similar issue: because it's a survey wizard some elements are hidden until they are needed. This is particularly evident in the mobile responsive view where we present limited data at a time. Because you can't get the height/width of a display: none; element we used the offscreen solution of position: absolute; and left: -9999px;