Images getting overlapped

[sreetamdas]

Using the same code as from the Real World example, but the images are getting overlapped, instead of getting resized as is shown in the live demo.

Any reason why this is happening?

Version: react-stack-grid@0.7.1

[sreetamdas]

Here's the code that I am using:

import React from "react";
import StackGrid, { transitions, easings } from "react-stack-grid";

const image_list = [
    {
        src: "/images/diogo-sousa-408287-unsplash.jpg",
        caption: "diogo-sousa-408287-unsplash",
    },
    {
        src: "/images/dylan-nolte-556274-unsplash.jpg",
        caption: "dylan-nolte-556274-unsplash",
    },
    {
        src: "/images/simon-migaj-452354-unsplash.jpg",
        caption: "simon-migaj-452354-unsplash",
    },
];

const transition = transitions.scaleDown;

export default class Gallery extends React.Component {
    render() {
        return (
            <StackGrid
                monitorImagesLoaded={true}
                columnWidth={600}
                duration={600}
                gutterWidth={15}
                gutterHeight={15}
                easing={easings.cubicOut}
                appearDelay={60}
                appear={transition.appear}
                appeared={transition.appeared}
                enter={transition.enter}
                entered={transition.entered}
                leaved={transition.leaved}
            >
                {image_list.map(obj => (
                    <figure key={obj.src}>
                        <img src={process.env.PUBLIC_URL + obj.src} alt={obj.caption} />
                        <figcaption>{obj.caption}</figcaption>
                    </figure>
                ))}
            </StackGrid>
        );
    }
}

[sreetamdas]

Also, using #39 solution of setting monitorImagesLoaded={true} doesn't help either for some reason :disappointed:

[sreetamdas]

Closing this, the issue seems to be solved by the simple addition of a class which explicitly defines the width as 100%; I thought this would be implicitly defined by the package itself :thinking:

Thanks for the package, really great stuff @tsuyoshiwada !