Issue with z-index of css dropdown menu

Question

I have broken my head on the following css.

<div id='new_task_wrap'>
  <div class='box'>
    <div class='first_row'>
      <div class='description' contenteditable='true'>
      </div>
      <div class='calendar dropdown'>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>

        </div>
      </div>
    </div>
  </div>
</div>

My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?

Important: The div heights should not be changed to show the dropdown menu.

You mean to say that content Link 1, Link 2, Link 3 should be on top? — Chaitali
– Chaitali, Commented Feb 27, 2017 at 13:09

pol · Accepted Answer · 2017-02-27 13:11:17Z

Remove overflow: auto on .first-row

$(document).on('click', '.dropdown', function() {
  $(this).find('.dropdown-content').toggle();
});

#new_task_wrap {
  position: relative;
  display: flex;
}

#new_task_wrap > .box {
  width: 100%;
  border-style: solid;
  border-color: #98afc8;
}

#new_task_wrap > .box > .first_row {
  display: flex;
  width: 100%;
  /*overflow-y: auto;*/
}

#new_task_wrap > .box > .first_row > .description {
  background-color: white;
  display: inline-block;
  font-weight: 400;
  padding: 9px 9px 9px 9px;
  cursor: text;
  outline: 0;
  flex-grow: 1;
  overflow-y: auto;
}

#new_task_wrap > .box > .first_row > .calendar {
  padding-top: 8px;
  cursor: pointer;
}

.right-add-on {
  position: relative;
}

.right-add-on >:not([contenteditable=true]) {
  position: absolute;
  right: 0;
  color: #67829e;
  cursor: pointer;
}

.dropdown {
  position: relative;
  vertical-align: middle;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  min-width: 160px;
  background-color: yellow;
  padding: 12px 16px;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
  <div class='box'>
    <div class='first_row'>
      <div class='description' contenteditable='true'>
      </div>
      <div class='calendar dropdown'>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>

        </div>
      </div>
    </div>
  </div>
</div>

Updated jsFiddle

Chaitali · Accepted Answer · 2017-02-27 13:17:04Z

1

Just change overflow-y to visible Refer this

The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.

#new_task_wrap > .box > .first_row {
  display: flex;
  overflow-y: visible;  //Here is the change
  width: 100%;
}

answered Feb 27, 2017 at 13:17

Chaitali

6414 silver badges12 bronze badges

Comments

Lucian · Accepted Answer · 2017-02-27 13:10:27Z

0

use position: absolute for .dropdown and position it accordingly

here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/

answered Feb 27, 2017 at 13:10

Lucian

1,7133 gold badges20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Issue with z-index of css dropdown menu

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related