I'm really confused with an issue I can't wrap my head around. For demonstration purposes, I included a vertical Menu component from Semantic UI. As you can see in the first picture, everything is normal and how I want it, but when I add a floated='right'
tag to <Menu />
, the bottom dividers disappear.
This is the way it's supposed to be:
This is what happens when the 'floated' tag is added:
import React, { Component } from 'react'
import { Header, Menu } from 'semantic-ui-react'
export default class MenuExampleText extends Component {
state = {}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu vertical> // <Menu vertical floated='right'> removes the divider
<Menu.Item
name='promotions'
active={activeItem === 'promotions'}
onClick={this.handleItemClick}
>
<Header as='h4'>Promotions</Header>
<p>Check out our new promotions</p>
</Menu.Item>
<Menu.Item
name='coupons'
active={activeItem === 'coupons'}
onClick={this.handleItemClick}
>
<Header as='h4'>Coupons</Header>
<p>Check out our collection of coupons</p>
</Menu.Item>
<Menu.Item
name='rebates'
active={activeItem === 'rebates'}
onClick={this.handleItemClick}
>
<Header as='h4'>Rebates</Header>
<p>Visit our rebate forum for information on claiming rebates</p>
</Menu.Item>
</Menu>
)
}
}
Unless you can reproduce the issue for us or someone has experienced this issue before I'm not sure if anyone will be able to help you. Reproducing your menu in HTML and using float:right;
does not appear to have the same issue.
Edit: Updated snippet to more closely follow your codepen and included css fix for display: none
that was your accepted answer.
const {
Menu,
Header
} = semanticUIReact
class App extends React.Component {
state = {}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu vertical style={styles.sidebarMenu} floated='right'>
<Menu.Item
name='promotions'
active={activeItem === 'promotions'}
onClick={this.handleItemClick}
>
<Header as='h4'>Promotions</Header>
<p>Check out our new promotions</p>
</Menu.Item>
<Menu.Item
name='coupons'
active={activeItem === 'coupons'}
onClick={this.handleItemClick}
>
<Header as='h4'>Coupons</Header>
<p>Check out our collection of coupons</p>
</Menu.Item>
<Menu.Item
name='deals'
active={activeItem === 'deals'}
onClick={this.handleItemClick}
>
<Header as='h4'>Deals</Header>
<p>Check out our collection of deals</p>
</Menu.Item>
<Menu.Item
name='rebates'
active={activeItem === 'rebates'}
onClick={this.handleItemClick}
>
<Header as='h4'>Rebates</Header>
<p>Visit our rebate forum for information on claiming rebates</p>
</Menu.Item>
</Menu>
)
}
}
const styles = {
sidebarMenu: {
marginLeft: 0,
marginRight: 0,
height: '100vh'
},
}
// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.getElementById('react-app-mount')
ReactDOM.render(<App />, mountNode)
.ui.floated.menu .item:last-child:before {
display: block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
<div id="react-app-mount"></div>