container div does not resize properly when children are removed about react-masonry-component HOT 8 CLOSED

@sinkpoint do you have any code snippets we can look at?

from react-masonry-component.

@afram, certainly, heres's an example of what I'm doing, thanks:

        let masonryOptions = {
            transitionDuration: 0,
            itemSelector:  '.item'
        }
        return (
                <div ref="gscrollwind" style={{height:'500px',overflow:'auto'}}>
                <Masonry
                    elementType={'div'}
                    options={masonryOptions}
                    disableImagesLoaded={false}
                >
                <ReactTransitionGroup transitionName="gallery">                
                    {
                        this.state.data.filter(function(it, i) {
                              // some kind of filter
                        }, this).map((it,i)=>{
                            // assign unique keys for masonry for each redraw session
                            // or else items will stay in place
                            let ik = it.doc_id+'__'+i 
                            return (<div key={ik} className="item"></div>)
                        },this)
                    } 
                </ReactTransitionGroup>                
                </Masonry>
                </div>
       )

from react-masonry-component.

Maybe I'm missing something, but this is a height of 500px with overflow: auto. That height of that container will always be 500px.

from react-masonry-component.

It's not that. It's the scroll height.
If there are say 20 items, there would be a long scroll height.
If if the number of items then change to 1, then in theory the scroll height should match the item and the scroll bar would be gone.
Right now, the scroll height is maintained, and the user would be scrolling empty space.

I might be over complicating the example with overflow:auto. I believe the problem is that the container div height is not recalculated properly. I'm just not sure where the problem is.

from react-masonry-component.

Without seeing the code in context, here are the things I would look at.

• What does the DOM and CSS look like after 1 item is visible?
• What does the transition CSS look like?
• Have you tried it without the transition group?
• The documentation for transition group indicates a requirement to include transition durations in the CSS and the component https://facebook.github.io/react/docs/animation.html
• That documentation also indicates that the css classes are added/removed on the next tick. Have you profiled your JavaScript to see how long these actions are taking?

from react-masonry-component.

Thanks for the suggestions.
I have tried to disable the transition group and it does work properly, so the problem is in the transition timing.

I found the sweet spot is about less than 10ms for transitionLeaveTimeout.
It's also not clear to me how this would play in conjunction of masonry's transitionDuration, so I keep it disabled.

This however means that fade-out transitions are not possible. Is there anyway to force a layout on the component at the end of the transition event?

from react-masonry-component.

@sinkpoint sorry for the delay in getting back to you - I was out of the country and away from internet.

Hopefully you found the answer in the mean time, though just in case, this answer outlines how you can access the instance masonry used in the component.

When the transition ends, you can call masonry.layout()

#16

from react-masonry-component.

@sinkpoint I would like to close this issue as it has been inactive for 1 month. Please reopen if you are still having issues :-)

from react-masonry-component.