nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-01-21 07:55:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: Fix missing arrow on dropdown form fields

Browse Source 
Closes: #2488.

This is due to outdated django-bootstrap-form package that does not set
.form-select class on dropdowns as needed by Bootstrap 5.

Tests:

- On stable and testing VMs, dropdowns in the 'Add backup location' page show
arrows.

- On a mobile layout, the overflowing text does not overlap onto the dropdown
arrow.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2025-01-16 12:14:04 -08:00 committed by Veiko Aasa
parent 0a35c91de5
commit d2dd547fac
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -165,6 +165,21 @@ form .alert .close {
flex-wrap: wrap;
}
/* In Bootstrap 5, drop down fields are meant to be to be styled with the
form-select class. Needs updated django-bootstrap-form */
select.form-control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
padding-right: 2.25rem; /* Don't overall text on the drop down arrow */
}
[data-bs-theme="dark"] select.form-control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/* In Bootstrap 5, instead of styling .col-* to 100% width by default, .row > *
is styled as .form-group has been removed. Needs updated
django-bootstrap-form */