2

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:

enter image description here

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:

enter image description here

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

Kid
  • 1,869
  • 3
  • 19
  • 48
  • Your sandboxes not working coz it gives a runtime errors, seems like you just copied the code without making it work. Also you **don't** need to share all your project (too much noise), you should make a **MINIMAL** reproducible example [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Dennis Vash Sep 21 '20 at 12:00
  • 1
    My Sandbox works maybe your laptop is slow. It's a LARG complex project and that is a minimal reproducible example considering.. – Kid Sep 21 '20 at 13:30

1 Answers1

1

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>

Edit Greta100 Masonry not expanding with it's content (forked)

95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
  • Excellent I learn so much. In 5 hour I give you the bounty – Kid Sep 24 '20 at 10:12
  • Will push your changes to the [repo](https://github.com/erikswed/Greta-100-React-Web-App). I learn Rectjs and Javascript coming from ANdroid, Java c++ ## – Kid Sep 24 '20 at 10:13
  • 1
    I'll check later. You can use the same concept from what I was talking about - the content cannot depend on the containing div's height since the containing div height is already dependent on the content's height – 95faf8e76605e973 Sep 24 '20 at 19:14
  • The vertical Masonry was broken before so has nothing to do with you Thanks – Kid Sep 24 '20 at 19:49