Position Icon Relative to Parent Div CSS React

Question

I've created the following component to display a circular image with a CheckMark icon mounted on the bottom right of the image.

I display multiple instances of these components in one row - for example 5 images in one row with a checkmark next to each image. I use the offset parameter to determine the left position of the Checkmark

This works fine as long as the images are in one row, however if they wrap into two rows, the checkmarks don't migrate accordingly to the second row, but instead remain in the first row to the right of the images in the first row.

This is caused by the offsetvalue I'm using for the left CSS property - for example if I have 3 images in one row, and 2 images in the second row - the 4th offset (which should be 0) will instead be 280.

Is there a way I can make the CheckMark position itself relative to the div instead of the whole page?

const StyledImage = styled.img`
    border-radius: 50%;
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    object-fit: cover;
    border: ${props => props.empty && '2px solid #555'};
`;

const CheckMark = styled(Icon)`
    position: absolute;
    bottom: 0;
    left: ${props => props.offset + 45}px;
    right: 0;
    top: 45px;
`;

export default ({ coverImage, index, empty }) => {
    const offset = index * 70;
    return empty ? (
        <StyledImage empty />
    ) : (
        <div>
            <StyledImage src={coverImage} alt="cover image" />
            <CheckMark
                offset={offset}
                name="check circle"
                color="green"
                size="large"
            />
        </div>
    );
};

Dae Hyeon Mun · Accepted Answer · 2021-12-25 16:27:12Z

1

yes you can. you wanna put the CheckMark component at the bottom-right in the div wrapped the two components right?

you don't need to calculate offset to position as you want. follow as below.

You should make a container component to wrap the two components and position them as you want.

Let me show you example.

const ImageContainer = styled.div`
    display: flex;
    flex-direction: column;
`;

const CheckMark = styled(icon)`
    display: flex;
    justify-content: end;
    align-items: center;
    // if you want some space around CheckMark, add "padding" here
`;

// rendering...
<ImageContainer>
    <StyledImage />
    <CheckMark />
</ImageContainer>

I hope you find solution :D

edited Dec 25, 2021 at 16:27

answered Dec 25, 2021 at 15:41

Dae Hyeon Mun

5364 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Position Icon Relative to Parent Div CSS React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related