javascript - How to use antd divider to separate two sides of the screen in a react component? - Stack Overflow

admin管理员组

文章数量:1236709

I am using antd and would like the vertical divider to split the two sides of my screen. The two sides are in fact separated by different Col ponents. They currently look something like this:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col span={2}>
          <Divider type='vertical'/>
        </Col>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }

The issue here is that the Divider is barely appearing. I would like it to go all the way down where the content ends. Instead, it is just a tiny little line.

This is a screenshot of what it currently looks like:

You can barely see the divider in the middle.

How can I make the vertical divider be as long as the content?

Thanks!

I am using antd and would like the vertical divider to split the two sides of my screen. The two sides are in fact separated by different Col ponents. They currently look something like this:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col span={2}>
          <Divider type='vertical'/>
        </Col>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }

The issue here is that the Divider is barely appearing. I would like it to go all the way down where the content ends. Instead, it is just a tiny little line.

This is a screenshot of what it currently looks like:

You can barely see the divider in the middle.

How can I make the vertical divider be as long as the content?

Thanks!

• javascript
• reactjs
• antd

Share Improve this question Follow edited Jan 29, 2021 at 15:24 spencer741 1,18511 gold badge1313 silver badges2626 bronze badges asked Jul 23, 2019 at 17:22 theJulstheJuls 7,4701818 gold badges9696 silver badges182182 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

You can set the height of the divider to 100% , see this sandbox

    <Divider type="vertical" style={{ height: "100%" }} />

if height's 100 % doesn't work, add <Row>. I predict you use only <Col />.

I did it with height: auto.

<Divider type="vertical" style={{ height: "auto"}} />

Mine doesn't work with the above answers. After a little bit of work. I finally got this below code to work.

< Divider
   type="vertical"      style={{ height: "100px", backgroundColor: "#000" }}
/>

height 100%

    <Row>
      <Col span={11}>
        CONTENT ONE SIDE
        <br />
        CONTENT ONE SIDE
        <br />
        CONTENT ONE SIDE
        <br />
      </Col>
      <Col span={2}>
        <Divider type="vertical" style={{ height: "100%" }} />
      </Col>
      <Col span={11}>CONTENT OTHER SIDE</Col>
    </Row>

https://codesandbox.io/s/antd-create-react-app-forked-rzp10?file=/index.js:181-499

本文标签： javascriptHow to use antd divider to separate two sides of the screen in a react componentStack Overflow