div wrap for antd component

user_14886186 0
Viewed 180

Hi i am having some trouble with Antd Space wrapping.

Sorry i'm an idiot with the css. Is there a css or style i can do to make it wrap to the next row?

This is within a <List.Item>

(Am ok to switch out the Space component to a normal div with appropriate css that can do the wrapping)

import { Card, Col, Row, Space } from 'antd';

          
<Space>
                { item.shares.reverse().map((share, i) => (

                   <SinglePost
                     share = {share}
                     height={300}
                     width={300}
                   />

                 ))}
               </Space>

in SinglePost.js

return (
      <Col span={8}>
      <Card style={{ width: props.width, height: props.height }}
        bordered={false}
        >
      <div className="approval-list-sub-box-holder-small">
            <Player
              playsInline
              // src={currentData.content.video}
              fluid={false}
              height="100%"
              width="100%"
            >
       . . .
      </div>
      </Card>
     </Col>
)

This is the output currently but as you can see it might become too long on the width and becomes unviewable :(

enter image description here

antd reactjs css
1 Answers

Adding a wrap = true seems to work. For some reason i think i tried it just now but didn't.

Alternatively having a div with flex-wrap: wrap; also seem to work. i went with space for now.

 <Space wrap = {true}>
                { item.shares.reverse().map((share, i) => (

                   <SinglePost
                     share = {share}
                     userId = {props.userId}
                     height={300}
                     width={300}
                   />

                 ))}
               </Space>
user_148861860
Related