55 lines
1.8 KiB
PHP
55 lines
1.8 KiB
PHP
@push('js')
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Ensure visibility in both light and dark themes */
|
|
.ts-wrapper .ts-control {
|
|
background-color: #ffffff !important;
|
|
color: #1d273b !important; /* Dark text for white background */
|
|
border: 1px solid #ced4da !important;
|
|
padding: 0.5rem 0.75rem !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
.ts-dropdown {
|
|
background-color: #ffffff !important;
|
|
color: #1d273b !important;
|
|
}
|
|
.ts-dropdown-content {
|
|
max-height: 300px !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
.ts-dropdown .active {
|
|
background-color: #f1f5f9 !important;
|
|
}
|
|
.ts-dropdown .option {
|
|
padding: 8px 12px !important;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
|
<script>
|
|
(function() {
|
|
const initTomSelect = () => {
|
|
document.querySelectorAll('select').forEach((el) => {
|
|
if (el.tomselect) return;
|
|
|
|
// Skip if it's hidden or specifically excluded
|
|
if (el.offsetWidth === 0 && el.offsetHeight === 0) return;
|
|
|
|
new TomSelect(el, {
|
|
copyClassesToDropdown: false,
|
|
dropdownParent: 'body',
|
|
controlInput: '<input>',
|
|
maxOptions: null,
|
|
sortField: [] // Respect server-side order
|
|
});
|
|
});
|
|
};
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initTomSelect);
|
|
} else {
|
|
initTomSelect();
|
|
}
|
|
})();
|
|
</script>
|
|
@endpush
|