CODEWITHSUNDEEP
javascriptjquery
user1919
user1919

Reputation: 3938

Dropwdown menu hides behind text input

As you can see in the photo, I have a dropdown menu which hides its self behind other menus and input text fields (the input text is using the select2 library). Is there a way to keep the dropdown menu above the others?

I have tried assigning a tabindex variable or zindex on the div of the dropdown menu but nothing changes.

This is the code of the dropdown menu:

<div class="input-group" style=" display: inline-table; vertical-align: middle; width: auto;  ">
  <div class="input-group-btn" id="drop_operator_list">
    <div class="btn-group btn-group-xs">
      <div class="dropdown">
        <button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#" value="AND">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-and-or" id="and-or_list" data-modal-button-id="and-or">
          <li><a href="#" id="AND">all</a></li>
          <li><a href="#" id="OR">any</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

enter image description here

Upvotes: 0

Views: 69

Answers (1)

Shahzaib Shahid
Shahzaib Shahid

Reputation: 1431

Set the dropdown menu position to relative and z-index to 9999; It will solve the issue you are facing.

Upvotes: 2

Related Questions