Skip to content
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

fix(Divider): Vertical Divider on docs rendered incorrectly #1544

Closed
val-samonte opened this issue Apr 4, 2017 · 4 comments
Closed

fix(Divider): Vertical Divider on docs rendered incorrectly #1544

val-samonte opened this issue Apr 4, 2017 · 4 comments

Comments

@val-samonte
Copy link

Steps to Reproduce

  1. Use in a Grid component

Expected
The Divider should render between Grid.Columns

Result
The Divider instead render on the left side

Testcase
http://react.semantic-ui.com/elements/divider#divider-example-vertical

@val-samonte val-samonte changed the title fix(Divider): your description fix(Divider): Vertical Divider on docs rendered incorrectly Apr 4, 2017
@levithomason
Copy link
Member

There is a W3C spec change issue causing this bug in the CSS:

Semantic-Org/Semantic-UI#4342

@levithomason
Copy link
Member

levithomason commented Apr 4, 2017

Note, you can work around this by putting dividers inside of a column rather than in between them:

image

import React from 'react'
import { Grid, Segment, Divider } from 'semantic-ui-react'

const DividerExampleVertical = () => (
  <Grid columns='equal' padded>
    <Grid.Column>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
    </Grid.Column>
    <Grid.Column width='1'>
      <Divider vertical>Or</Divider>
    </Grid.Column>
    <Grid.Column>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
    </Grid.Column>
    <Grid.Column width='1'>
      <Divider vertical>Or</Divider>
    </Grid.Column>
    <Grid.Column>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
    </Grid.Column>
  </Grid>
)

export default DividerExampleVertical

@val-samonte
Copy link
Author

thanks @levithomason, sorry i forgot to check the open issues.

@levithomason
Copy link
Member

No worries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants