I have a layout that combines bootstrap accordion and dropdown elements. However, the issue is that the dropdown menu appears behind the following question card, making it difficult for users to see.
template.html:
<div class="card-body">
<!-- Accordion -->
<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 are some screenshots demonstrating the problem:
https://i.sstatic.net/bznWu.png https://i.sstatic.net/F6eM0.png
And the Fiddle:
https://jsfiddle.net/albertosanmartinez/o287rysk/12/
If anyone could provide assistance with this issue, it would be greatly appreciated. Thank you in advance.