debug: apply aggressive CSS to troubleshoot tomselect visibility

This commit is contained in:
2026-05-01 14:26:49 -04:00
parent d79d2fbe3e
commit 799eb37ae0
+16 -5
View File
@@ -1,12 +1,23 @@
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
/* Aggressive visibility for debug */
.ts-control, .ts-wrapper .ts-control {
background-color: #ffffff !important;
border: 2px solid red !important;
min-height: 50px !important;
opacity: 1 !important;
}
.ts-dropdown {
display: block !important;
z-index: 10000 !important;
background-color: white !important;
border: 1px solid black !important;
}
</style>
<script> <script>
window.addEventListener('load', function() { window.addEventListener('load', function() {
console.log("TOMSELECT DEBUG: Page loaded, checking for selects..."); document.querySelectorAll('select').forEach(function(el) {
var selects = document.querySelectorAll('select');
console.log("TOMSELECT DEBUG: Found " + selects.length + " selects.");
selects.forEach(function(el) {
console.log("TOMSELECT DEBUG: Initializing", el.id, "Options:", el.options.length);
new TomSelect(el, { new TomSelect(el, {
create: false, create: false,
sortField: { field: 'text', direction: 'asc' } sortField: { field: 'text', direction: 'asc' }