Search code examples
cssdjangobootstrap-4

Bootstrap Dropdown appears behind other elements

I have a template that mix bootstrap accordion and dropdown, the problem is that dropdown appears behind the next question card or what is the same, inside your card and is not seen.

template.html:

<div class="card-body">
  <!-- Acordion -->
  <div class="accordion" id="dlns_faqs_acordion">
    {% for element in elements %}
      <div class="card">
        <div class="card-header dlns_faqs_acordion_heading" id="dlns_faqs_acordion_heading_{{ forloop.counter0 }}">
          <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#dlns_faqs_acordion_content_{{ forloop.counter0 }}" aria-expanded="false" aria-controls="dlns_faqs_acordion_content_{{ forloop.counter0 }}">
              {{ element.question }}
            </button>
          </h2>
          <!-- Options -->
          <div class="dropdown">
            <button class="btn dlns_elements_button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="fas fa-ellipsis-h"></span>
            </button>
            <div class="dropdown-menu dropdown-menu-right text-center" arial-labelledby="option_button">
              ...
              <a>...</a>
              ...
            </div>
          </div>
        </div>
        <div id="dlns_faqs_acordion_content_{{ forloop.counter0 }}" class="dlns_faqs_acordion_content collapse" aria-labelledby="dlns_faqs_acordion_heading_{{ forloop.counter0 }}" data-parent="#dlns_faqs_acordion">
          <div class="card-body">
            {{ element.answer }}
          </div>
        </div>
    </div>
    {% endfor %}
  </div>
</div>

style.css:

.dlns_faqs_acordion {
  border: none;
}

.dlns_faqs_acordion_heading {
  border: none;
  background: transparent;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  align-content: space-between;
}

.dlns_faqs_acordion_heading button {
  color: var(--dlns_color_primary) !important;
}

.dlns_faqs_acordion_heading button.collapsed {
  color: black !important;
}

.dlns_faqs_acordion_heading button:hover {
  text-decoration: none;
}

.dlns_faqs_acordion_content {
  color: var(--dlns_color_tertiary);
}

Here there are some images with the problem:

enter image description here enter image description here

And the Fiddle:

https://jsfiddle.net/albertosanmartinmartinez/o287rysk/12/

Anybody cloud help me ? Thanks in advance.

Solution

  • Since you did not create a fiddle or plnkr, i can only provide some suggestions:

    • Manually adjust the dropdown-menu box z-index to a very big value to see if it works.
    • Check the container who cut the dropdown-menu, to ensure the overflow property is set to visible.

    Update:

    .card {
  overflow: visible;
}

    https://jsfiddle.net/65fq347r/