Make child dropdown visible while parent has overflow:scroll

Question

I've seen a couple answers here and here but these don't help my case.

In my case, I have a container with scrollable content inside it:

.wrapper {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Action <span class="caret"></span>
</button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?

Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot position:absolute them.

Fiddle here: https://jsfiddle.net/dfv59nuy/

Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown. — Steve K, Nov 20 '18 at 17:43

tao · Answer 1 · 2018-11-21T09:00:56.400

The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).

That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.

Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):

const ref = document.querySelector('.dropdown-toggle'), 
      popup = document.querySelector('.dropdown-menu'),
      popper = new Popper(ref, popup, {
        placement: 'bottom',
        positionFixed: true
      });

.wrapper {
  border: 1px solid grey;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class='wrapper'>
  <p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
    you want and our generator will generate just as you specified. Pretty cool, isn't it?
  </p>

  <div class="btn-group dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Make child dropdown visible while parent has overflow:scroll

1 Answers1