Stephen C Stephen C - 3 months ago 20
Sass (Sass) Question

Dropdown ignore parent overflow

I have a modal where I have dropdowns in the element.

The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.

Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?

You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?

Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.

Prefer a CSS only solution.

Thanks!



.w-100 {
width: 100%;
height: 100%;
}

.h-100 {
width: 100%;
height: 100%:
}

.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}

.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}

.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}

.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}

.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}

.flex-1 {
flex: 1;
}

.dropdown-width {
text-align: right;
width: 100px;
}

.dropdown-container {
display: inline;
position: relative;
}

.toggle-dropdown {
color: #4caf50
}

.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}

<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">

<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer

You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.

.w-100 {
  width: 100%;
  height: 100%;
}

.h-100 {
  width: 100%;
  height: 100%:
}

.modal-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 65;
  padding-top: 100px;
  overflow: auto;
  background-color: rgba(0,0,0,.6);
}

.modal-small {
  max-width: 600px;
  width: 40%;
  margin: 0 auto;
  float: none;
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0;
}

.container {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 15px;
}

.element-container {
  height: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.element-flex-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  border-bottom: 3px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  margin-right: 10px;
}

.flex-1 {
  flex: 1;
}

.dropdown-width {
  text-align: right;
  width: 100px;
}

.dropdown-container {
  display: inline;
  position: absolute;
  top: 0;
  right:0;
}


.toggle-dropdown {
  color: #4caf50
}

.dropdown {
  position: fixed;
  border: 1px solid red;
  width: 120px; 
  display: block;
  background-color: #fff;
  z-index: 10;
  margin-bottom: 20px;
  padding: 0;
 
}
<div class="modal-overlay">
  <div class="modal-small">
    <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
      <div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
        <div class="container">
          
          <!-- Repeat of elements -->
          <div class="element-container">
            <div class="element-flex-container">
              <img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
              <div class="flex-1">
                Something here
              </div>
              <div class="dropdown-width">
                <div class="dropdown-container">
                  <div class="toggle-dropdown">
                    Toggle
                  </div>
                  <div class="dropdown">
                    Something here
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                    <br />
                    Something else
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>