Dropdown displaying top and not in the bottom in Firefox

How Do I...
#1

I am using Bootstrap 4 Cards and the framework select2. I have a basic dropdown select inside a card-body but this, display to the top in Firefox. However, works fine in Google Chrome. I cant understand why. How can I make to display bottom without set height?

<div class="card-body">
<div class="form-row">
  <!--<label for="email" class="mr-sm-2">CIF:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" id="email">-->


  <select class="js-example-responsive js-example-basic-single" style="width: 50%">

    <optgroup label="...">
      <option>...</option>
      ...
  </select>

  <script>
    $(document).ready(function () {
      $('.js-example-basic-single').select2();
    });
  </script>
</div>

Here is the demo in firefox:

image
Thank you.

#2

Typically, the “dropdown” will “pop up” if there isn’t enough room below the control for the dropdown to display. I wonder if one of the containing elements (div.card-body or div.form-row) is too short (at least on Firefox).

Have you tried it in a browser other than Firefox or Chrome (for example, Internet Explorer or MS Edge)? If so, does it behave like Chrome, or like Firefox?

Finally, can you post your code on Codepen or JSFiddle so I can see for myself what it’s doing?

#3

Can the pop up always appear on the top of the dropdown?

#4

I don’t know of an easy way to force the drop-down to always pop up, other than attaching the Select2 to a DOM element that is absolutely positioned at or near the bottom of the web page. You would have to write your own DropdownAdapter to make it behave as you’ve described.