corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

add wrapper to custom select options, to exclude search from scrolling
Some checks failed
Build and Push Docker Image / build (push) Failing after 6m57s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-13 10:56:01 +00:00
parent 7a36e4fbe3
commit 34155dc300
2 changed files with 63 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/home/static/home/scss/index.scss
View File

@ -121,14 +121,11 @@
border: 1px solid var(--bs-border-color); border: 1px solid var(--bs-border-color);
border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm); border-radius: 0 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm);
box-shadow: var(--bs-box-shadow); box-shadow: var(--bs-box-shadow);
max-height: 200px;
overflow-y: auto;
z-index: 1000; z-index: 1000;
outline: 0; outline: 0;
.corbz-select-search { .corbz-select-search {
// display: none; // disabled for now
width: 100%; width: 100%;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: none; background: none;
@ -146,6 +143,11 @@
} }
.corbz-select-dropdown-options {
max-height: 200px;
overflow-y: auto;
.corbz-select-option { .corbz-select-option {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
@ -208,3 +210,5 @@
} }
} }
}

13
static/js/base.js
View File

@ -108,7 +108,9 @@ $(document).ready(function() {
initThemeChoice(); initThemeChoice();
}); });
// Custom Select Jquery
// region Custom Select Control
(($) => { (($) => {
function initCorbzSelect() { function initCorbzSelect() {
const defaultSelectedHtml = " "; const defaultSelectedHtml = " ";
@ -117,8 +119,6 @@ $(document).ready(function() {
let values = $select.val() || []; let values = $select.val() || [];
let names = []; let names = [];
// if (settings.id === "styleTitleMutator") { debugger; }
if (!Array.isArray(values)) { values = [values] }; if (!Array.isArray(values)) { values = [values] };
// Update names based on values // Update names based on values
@ -167,7 +167,9 @@ $(document).ready(function() {
const $dropdown = $('<div class="corbz-select-dropdown">'); const $dropdown = $('<div class="corbz-select-dropdown">');
// Search input to filter the dropdown results // Search input to filter the dropdown results
const $search = $('<input type="text" class="corbz-select-search" placeholder="Search ...">'); const $search = $('<input type="search" class="corbz-select-search" placeholder="Search ...">');
const $optionsContainer = $('<div class="corbz-select-dropdown-options"></div>');
const settings = { const settings = {
id: $select.prop("id"), id: $select.prop("id"),
@ -179,6 +181,7 @@ $(document).ready(function() {
// Add custom elements to the DOM // Add custom elements to the DOM
$dropdown.prepend($search); $dropdown.prepend($search);
$dropdown.append($optionsContainer)
$container.append($selected).append($dropdown); $container.append($selected).append($dropdown);
$select.hide().after($container); $select.hide().after($container);
@ -262,7 +265,7 @@ $(document).ready(function() {
}); });
} }
$dropdown.append($option) $optionsContainer.append($option)
}); });
// For no options, display a message // For no options, display a message