Component Doesn't Render Until First Resize Event
notsoluckycharm opened this issue · comments
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!
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;