I like to make a div
expand according to its content height but the hole Component
inside that div
is hidden if I use like height: '100%'
. It's a bit complex and wish for some extra eyes!
I made a CodeSandbox
Looks like this in Chrome:
I can see during debug that the "hidden" Component
is rendering ok so it's strange that it's "hidden"
If I set the same Style
to height: 1000
the <ul>
have Children:
But I want it to expand according to its content height so height: 1000
will not work.
In this CodeSandbox I set the height: 1000,
to demonstrate what happens. The Component
that refuse to expand height is a Masonry
image gallery Component
style={{
width,
height: 1000,
position: 'relative',
margin: '0 auto',
}}
When you open the Sandbox you see in the left editor windows this TimeLineViewer.js
and the Style
code problem. The TimeLineViewer.js
loads the Masonry
image gallery Component
Masonry.js
What I have tried is to set parent to also 100% height but with no luck.. I'm a little bit new to JavaScript and HTML so advice would be good
To debug this, start by taking off or commenting out the LeComponent
and then testing your div
actual height when you are implementing the 100%
height.
<div
style={{
width,
height: !fullscreen && "100%",
position: fullscreen ? 'initial' : 'relative',
margin: '0 auto',
}}
>
{/* <LeComponent
infinite
items={items}
itemRenderer={ItemRenderer}
gutter={gutter}
outerGutter={outerGutter}
extraPx={0}
debug={debug}
rows={{
0: 1,
320: 2,
480: 3,
640: 4,
}}
cols={{
0: 1,
360: 2,
640: 2,
960: 3,
1280: 4,
1400: 5,
1720: 6,
2040: 7,
2360: 8,
}}
onEnd={() => {
// TODO possible when many items lazy load them
// this.addItems();
}}
/> */}
</div>
You will notice, that it still takes up no height at all and the component you created did not have any bearing to that. This is because it is a CSS issue. The height percentage cannot be determined because there is no parent or ancestor with a height definition. You are getting the percentage of void.
After that, we can take a glance at your Masonry
component. Just by looking at the method identifiers (such as _getDimensions
, _setContainerHeight
) and further reviewing the code base, we can learn that this component is actually dependent on certain element dimensions (most likely the parent div
dimension as well) - and from what we learned from the CSS issue awhile ago, the parent div
actually has a height
of 0.
At this point, I took out the style
props on your Masonry Component so that it would not be dependent on the parent dimensions and that fixed the issue
<div ref={this.container}>
<ul ref={this.list}>
{mounted && items.map((item, index) => this.renderItem({ index, item, maxIndex }))}
</ul>
</div>