New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Divider style problem #9956

Closed
muzea opened this Issue Apr 8, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@muzea
Contributor

muzea commented Apr 8, 2018

Version

3.4

Environment

Chrome:latest

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Narrow the display space until the text breaks and you will see problems with Divider's location

What is expected?

Divider's position should be below the text

What is actually happening?

Divider's position in the middle of the text

@afc163

This comment has been minimized.

Member

afc163 commented Apr 8, 2018

I fixed it by adding clear: both. And you shouldn't use Col and Divider like this through.

@afc163 afc163 closed this in e8d8741 Apr 8, 2018

@muzea

This comment has been minimized.

Contributor

muzea commented Apr 8, 2018

Although I can write like this

  <Row>
    <Col span={24}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</Col>
    <Col span={24}><Divider /></Col>
  </Row>

but this col looks unnecessary

@afc163

This comment has been minimized.

Member

afc163 commented Apr 8, 2018

How about:

  <Row>
    <Col span={24}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
      <Divider />
    </Col>
  </Row>
@muzea

This comment has been minimized.

Contributor

muzea commented Apr 8, 2018

It's all the product's fault 😂

Our layout like this

  <Row>
    <Col span={12}>
      <h2 style={{ fontSize: 14 }}>我是标题</h2>
    </Col>
    <Col span={12} style={{ textAlign: 'right' }}>
      <Switch />
    </Col>
    <Col  span={16}>
      我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字我是字
    </Col>
    <Col span={24}><Divider /></Col>
  </Row>

zheeeng added a commit to zheeeng/ant-design that referenced this issue Apr 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment