How can I allow these card components to cover the white space completely?

Question

When I render this component WITHOUT the wrapping 'div' tag the ui works fine.

Hoop.js
return connectDropTarget(
            <div className="column"> <--works fine if I take this guy out
                <Card >
                    <Image src={basketball_hoop}/>
                    <Card.Content>
                        <Card.Header>
                            Matthew
                        </Card.Header>
                        <Card.Meta>
                        <span className='date'>
                          Joined in 2015
                        </span>
                        </Card.Meta>
                        <Card.Description>
                            Matthew is a musician living in Nashville.
                        </Card.Description>
                    </Card.Content>
                    <Card.Content extra>
                        <a>
                            <Icon name='user'/>
                            22 Friends
                        </a>
                    </Card.Content>
                </Card>
            </div>
);

However, in order to use react-drag-and-drop I have to wrap it in a 'div' in order to return it for some reason. When I apply the div tag it shrinks to 75% of its original size.

The name of this^ component is Hoop. You can see it rendered here.

ParentOfHoop.js
return (
            <div className="ui equal width grid">
                <Card.Group className="equal width row">
                    <Hoop isOver=""/>
                    <Hoop isOver=""/>
                    <Hoop isOver=""/>
                </Card.Group>
            </div>
        );

How can I make it so that Hoop fill its parent div entirely? I'm using Semantic UI's grid layout.

Edit: you can see the entire component system here --> https://github.com/ammark47/PersonalWebsite/tree/master/src/components

Can you paste here the css of the column class? – chemitaxis Jan 10 '17 at 19:23 — chemitaxis, Jan 10 '17 at 19:23

score 0 · Answer 1 · answered Jan 10 '17 at 19:58

I was able to solve this by refactoring(not sure if that is the word) the Hoop.js file a bit more. I removed from the component and made it the drop target. I was then able a) return without the surrounding 'div' tag and b) made the the drop target which was my original intention anyway

Final result:

Hoop.js
class Hoop extends React.Component {
render() {

    return (
            <Card className="column">
changed this--> <TargetHoop isOver="" projectname="www.squadstream.com"/>
                <Card.Content>
                    <Card.Header>
                        Matthew
                    </Card.Header>
                    <Card.Meta>
                    <span className='date'>
                      Joined in 2015
                    </span>
                    </Card.Meta>
                    <Card.Description>
                        Matthew is a musician living in Nashville.
                    </Card.Description>
                </Card.Content>
                <Card.Content extra>
                    <a>
                        <Icon name='user'/>
                        22 Friends
                    </a>
                </Card.Content>
            </Card>
    );
}

}

TargetHoopImage.js (New drag drop target)

  const hoopTarget = {
    canDrop(props) {
        return {}
    },

    drop(props) {
        console.log(props.projectname);
    }
};

function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver()
    };
}

class TargetHoop extends React.Component {
    render() {

        const {connectDropTarget, isOver} = this.props;
        return connectDropTarget(
            <div>
                <Image src={basketball_hoop}/>
            </div>
        );
    }
}

How can I allow these card components to cover the white space completely?

1 Answers1