CODEWITHSUNDEEP
htmlcssreactjsantd
Renee
Renee

Reputation: 321

How to I align items properly in react?

I am learning react and antd and was trying it practically. I want to have a button and two input fields with 10px gap and exactly on top of the beginning of each field I want to display the title of those fields. I am using Row and Col of antd. The fields are getting overlapped. I am not sure where I am going wrong. This is the implementation:

<Row className="mt-2" gutter={24}>
  <Col sm={4} >
    <span>Upload</span>
  </Col>
  <Col sm={7}>
    <span>File Name</span>
  </Col>
  <Col sm={5}>
    <span>File Path</span>
  </Col>
  </Row>
  <Row className="mt-2" gutter={24}>
    <Col sm={4}>
      <Upload maxCount={1} showUploadList={false} beforeUpload={() => false} >
        <Button type='primary'>Upload</Button>
      </Upload>
    </Col>
    <Col sm={7}>
      <input style={{height: "40px", width: "400px"}} disabled={true}></input>
    </Col>
    <Col sm={5}>
      <input style={{height: "40px", width: "300px"}} ></input>
      </Col>
</Row>

I have attached the picture of how it should be spaced. When I run the code all the fields are not aligned properly. Where am I going wrong. I think its with sm field but I am not sure. Will Col work properly if I want spacing between the fields and I am also not using the complete width of the screen. enter image description here

Upvotes: 0

Views: 72

Answers (1)

sms
sms

Reputation: 1440

Antd Grid System is 24, You have to Split it Correctly..

codesandbox -> https://codesandbox.io/s/antd-reproduction-template-forked-pmxh30?file=/index.js

 <Row className="mt-2" gutter={24}>
  <Col xl={4} lg={4} md={4} sm={24} xs={24} >
    <p>Upload</p>
    <Upload className="mt-2" maxCount={1} showUploadList={false} beforeUpload={() => 
     false} >
        <Button type='primary'>Upload</Button>
      </Upload>
  </Col>
  <Col xl={12} lg={12} md={12} sm={24} xs={24}>
    <p>File Name</p>
    <input className="mt-2" style={{height: "40px", width: "400px"}} 
    disabled={true}></input>
  </Col>
  <Col xl={8} lg={8} md={8} sm={24} xs={24}>
    <p>File Path</p>
   <input className="mt-2" style={{height: "40px", width: "300px"}} > 
   </input>
  </Col> 
</Row>

Upvotes: 0

Related Questions