From d2dd547faca13209295ca0345839c4c755aac2c4 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Thu, 16 Jan 2025 12:14:04 -0800 Subject: [PATCH] ui: Fix missing arrow on dropdown form fields 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 Reviewed-by: Veiko Aasa --- static/themes/default/css/main.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index c39c4ab79..c100ba7f6 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -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 */