Enhance dropdown component by adding overflow handling and improving search input styling for better usability.
This commit is contained in:
parent
e96150a92b
commit
01c891b903
1 changed files with 20 additions and 8 deletions
|
@ -8,17 +8,19 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</label>
|
</label>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
|
<button class="btn btn-outline-dark dropdown-toggle w-100 overflow-x-hidden" type="button" data-bs-toggle="dropdown"
|
||||||
data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
|
data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
|
||||||
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
|
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
|
||||||
{{ current_item.identifier if current_item else '-' }}
|
{{ current_item.identifier if current_item else '-' }}
|
||||||
</button>
|
</button>
|
||||||
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
|
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
|
||||||
<ul class="dropdown-menu w-100" id="menu{{ id }}">
|
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
|
||||||
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
|
<input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0" id="search{{ id }}" placeholder="Search...">
|
||||||
{% for item in list %}
|
<div class="overflow-auto overflow-x-hidden" style="max-height: 35vh; z-index: 9999;" id="{{ id }}DropdownContent">
|
||||||
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
|
{% for item in list %}
|
||||||
{% endfor %}
|
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -34,15 +36,25 @@
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
|
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
|
||||||
const {{ id }}Input = document.getElementById("{{ id }}");
|
const {{ id }}Input = document.getElementById("{{ id }}");
|
||||||
|
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
|
||||||
|
const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
|
||||||
|
const {{ id }}Button = document.getElementById("{{ id }}Button");
|
||||||
|
|
||||||
|
{{ id }}Button.addEventListener("shown.bs.dropdown", () => {
|
||||||
|
const menuHeight = {{ id }}Dropdown.clientHeight;
|
||||||
|
const inputHeight = {{ id }}SearchInput.offsetHeight;
|
||||||
|
const availableHeight = menuHeight - inputHeight;
|
||||||
|
|
||||||
|
{{ id }}DropdownContent.style.maxHeight = availableHeight + "px";
|
||||||
|
console.log("Dropdown content max height set to:", availableHeight + "px");
|
||||||
|
});
|
||||||
|
|
||||||
{{ id }}Dropdown.addEventListener("click", (e) => {
|
{{ id }}Dropdown.addEventListener("click", (e) => {
|
||||||
if (e.target.tagName === "A") {
|
if (e.target.tagName === "A") {
|
||||||
{{ id }}Input.value = e.target.dataset.invValue;
|
{{ id }}Input.value = e.target.dataset.invValue;
|
||||||
console.log("Selected {{ id }} ID:", {{ id }}Input.value);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
|
|
||||||
console.log({{ id }}SearchInput);
|
console.log({{ id }}SearchInput);
|
||||||
{{ id }}SearchInput.addEventListener("input", () => {
|
{{ id }}SearchInput.addEventListener("input", () => {
|
||||||
const filter = {{ id }}SearchInput.value.toLowerCase();
|
const filter = {{ id }}SearchInput.value.toLowerCase();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue