Search code examples
htmlcssreactjssemantic-ui-react

Divider Disappears When Adding Floated Tag on Vertical Menu Semantic UI React

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 the way it's supposed to be

This is what happens when the 'floated' tag is added:

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>
      )
   }
}
Solution

  • 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>