CODEWITHSUNDEEP
javascriptreactjsdropdownsemantic-ui
Young Do Kim
Young Do Kim

Reputation: 13

Dropdown menu in React not showing

I'm trying to create a simple dropdown menu in a card element but am having issues getting the menu to actually show up. I inspected it on Chrome and it says the menu is there but I can't get it to show up on the screen.

constructor(props) {
    super(props);
    this.state = {
        loading: true,
        open: false
    };
}

    toggleDropDown = () => {
    this.setState({ open: !this.state.open });
};

<div className="content">
     <div
         onClick={event => {
             event.stopPropagation();
         }}
         onFocus={() => {
             this.toggleDropDown();
         }}
         onBlur={() => {
             this.toggleDropDown();
         }}
         tabIndex="0"
         className="ui right floated dropdown" >
         <i className="ellipsis vertical icon" />
              {this.state.open ? (
                    <div className="menu">
                         <div className="item">
                              <i className="edit icon" /> Edit Post
                         </div>
                         <div className="item">
                              <i className="delete icon" />Remove Post
                         </div>
                         <div className="item">
                              <i className="hide icon" /> Hide Post
                         </div>
                    </div>
              ) : null}
        </div>
        <div className="header">{schedule.title}</div>
        <div className="description">
              <p>{schedule.description}</p>
        </div>
        <div className="meta">
             <span className="right floated time">
                   {moment(schedule.date).fromNow()}
             </span>
       </div>
 </div>

This is a screenshot of the card I am producing (div with classname content is all that shows up in the picture). Reactjs dropdown menu

Upvotes: 1

Views: 5813

Answers (2)

Shivam Pawar
Shivam Pawar

Reputation: 141

We need to overwrite one css class forcefully like this:

.ui.dropdown .visible.menu {
  display: inline-block !important;
}

Upvotes: 1

Andy Hoffman
Andy Hoffman

Reputation: 19109

The issue is that .menu, although it is appearing in the inspector, is set to display: none.

Here's me disabling the property.

enter image description here

And here's the menu displaying as expected:

enter image description here

Here's a crude fix showing that it's a display issue: CodeSandbox Demo.

Upvotes: 2

Related Questions