Verbesserung der Benutzeroberfläche und Funktionalität des Sprachauswahl-Dropdown-Menüs

This commit is contained in:
Developer 02
2024-05-13 16:27:46 +02:00
parent ef6e921451
commit db83f25d57
9 changed files with 154 additions and 48 deletions

View File

@@ -139,4 +139,63 @@ footer#page-footer a:focus {
.none-display {
display: none
}
.dropdown-flag img, .img-flag {
width: 30%;
height: 70%;
}
.dropdown-flag {
height: 75%;
width: 75%;
}
/* --- */
/* Adjusting the height of the select2 container */
.dropdown-flag .select2-container--default .select2-selection--single {
height: 40px; /* Desired height */
}
/* Adjusting the height and vertical alignment of the selected item */
.dropdown-flag .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 38px; /* Should be 2px less than the height for internal padding */
}
/* Adjusting the height of the dropdown arrow */
.dropdown-flag .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px; /* Again, 2px less than the height */
}
/* Adjusting the height of dropdown list items */
.dropdown-flag .select2-container--default .select2-dropdown .select2-results>.select2-results__options {
max-height: 200px; /* Optional, adjust for larger dropdown height */
}
/* CSS for custom class to increase dropdown height */
.increase-dropdown-height {
min-height: 400px; /* Optional, larger value for increased height */
}
/* Adjusting select2 width to fit within a specific form size */
.dropdown-flag .select2-container {
width: 100% !important; /* Makes the container full width */
max-width: 180px; /* Suitable maximum width for the form */
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-color: #86b7fe;
outline: 0;
mask-border-width: 0
}
.select2-container--default .select2-search--dropdown .select2-search__field:hover {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.select2-search__field {
display:none
}