Stop dropdown from expanding div above

Question

Fellow Coders,

I encountered a problem while putting dropdown menu into my app's navigation. When I drag my mouse over my dropdown element, menu below expands together expanding div element above (which is dropdown menu's name) and pushing all other items in navigation's menu to the right side. Here is my code:

const listItems = links.map((link_name) =>
  <li className="nav-item" key={link_name}>
    <div className="nav-link"><DropDown name={link_name} /></div>
  </li>
);
return (
  <nav className="navbar-light" style={{ backgroundColor: '#333333' }}>
    <div>
      <div className="container-fluid">
        <Link to="/" className="navbar-brand">
          <img alt="dribbble" style={styles.style_img} src={"http://www.underconsideration.com/brandnew/archives/dribbble_logo_detail.png"} />
        </Link>
      <ul className="nav navbar-nav" style={styles.style_l}>
        {listItems}
      </ul>
    </div>
      <ul className="nav navbar-nav" style={styles.style_r}>
        {this.renderLinks()}
        <li className="nav-item" key={10}>
          <input type="search" ref="city" placeholder="Search"/>
        </li>
      </ul>
    </div>
  </nav>
);
const styles = {
 style_r: {
  margin: 10,
  top: 5,
  right: 17,
  bottom: 20,
  left: 'auto',
  position: 'fixed',
 },
 style_l: {
  margin: 5,
  top: 10,
  left: 134,
  bottom: 20,
  position: 'absolute',
 },
 style_img: {
  margin: 5,
  left: 10,
  width: 100,
  height: 42,
 }
 };

dropdown is defined as:

if(this.state.menuActive) {
  menu = <div>
            <ul className="drop">
              <li>First Item </li>
              <li>Second Item </li>
              <li>Third Item </li>
            </ul>
          </div>
} else {
  menu = "";
}
return (
  <div id = "menu">
    <div id = "dropdown_name" style={{ color: '#F5F5F5' }} onMouseOver = { this.toggleMenu } onMouseLeave = { this.toggleMenu }>{this.props.name}</div>
    <ReactCSSTransitionGroup transitionName = "menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
      {menu}
    </ReactCSSTransitionGroup>
  </div>
)

if I put style={{ position: absolute }} on div (dropdown_name), in my nav bar every element collides into one gibberish weird looking unreadable name...

and here's mine css:

    .menu-enter {
      max-height: 0px;
      -webkit-transition: max-height;
      overflow: hidden;
      width: 100%;
    }

    .menu-enter.menu-enter-active {
      height: auto;
      max-height: 100px;
      width: 100%;
    }

    .menu-leave {
      max-height: 100px;
      -webkit-transition: max-height;
      width: 100%;
    }

    .menu-leave.menu-leave-active {
      overflow: hidden;
      max-height: 0px;
      width: 100%;
    }

    ul.drop {
      margin-top: 7px;
      background-color: #333333;
      color: #6D6D6D;
      border: #333333 solid 7px;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      width: 100%;
      padding-left:0.4em;
      font-size: 12pt;
      list-style-type: none;
    }

How can I prevent dropdown from expanding my dropdown's name above? I want that my divs that represent dropdown's names would remain the same width.

chipit24 chipit24 · Accepted Answer · 2017-07-24T01:13:30

From MDN:

The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).

Keep your absolute positioning on the dropdown component, and place a position: relative; style on the dropdown's container component (nav-link). This will allow the dropdown to be positioned relative to it's containing nav link.

It seems like your issue with every element combining when you added the absolute position was because they were all being absolutely positioned to the body element.

Stop dropdown from expanding div above

1 Answers