nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-04-29 10:10:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: Fix placement of tags menu under tags input with Bootstrap 5

Browse Source 
- During the placement computation for the drop down menu, the height of the
dropdown-menu is very high and that leads to it getting placed at the top of the
page instead of the below the search element.

- To avoid the problem, cap the height of the dropdown. Somehow, the original
calculation for the height using CSS calc() does not seem to working as
expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2024-12-09 15:23:15 -08:00 committed by Veiko Aasa
parent 1a01f672d6
commit 4fdf6a7ffe
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plinth/templates/apps.html
View File

@ -28,7 +28,7 @@
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
autocomplete="off" placeholder="{% trans "Search with tags" %}"> autocomplete="off" placeholder="{% trans "Search with tags" %}">
<div class="dropdown-menu" aria-labelledby="add-tag-input"> <div class="dropdown-menu" aria-labelledby="add-tag-input">
<ul class="dropdown-items list-unstyled"> <ul class="dropdown-items">
{% for tag in all_tags %} {% for tag in all_tags %}
{% if tag not in tags %} {% if tag not in tags %}
<li class="dropdown-item" data-tag="{{ tag }}" <li class="dropdown-item" data-tag="{{ tag }}"

7
static/themes/default/css/main.css
View File

@ -379,8 +379,13 @@ html {
/* dropdown-menu for tags is a scrollable list */ /* dropdown-menu for tags is a scrollable list */
.tag-input .dropdown-menu { .tag-input .dropdown-menu {
bottom: calc(-100% - 10px);
overflow-y: auto; overflow-y: auto;
max-height: 15rem;
}
.tag-input .dropdown-menu > ul {
list-style: none;
margin-bottom: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {