diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 028e0720..b7096c43 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1229,25 +1229,25 @@ h6 a:hover { .bg-primary-ghost { background: rgba(33, 46, 83, 0.05); } /* ============================================================ - FIX BOOTSTRAP-SELECT (SELECTPICKER) - VERSION SÉCURISÉE + BOOTSTRAP-SELECT : CORRECTIF FINAL SANS LARGEUR FORCÉE ============================================================ */ -/* 1. DISPARITION RADICALE DU SELECT NATIF (Empêche le doublon) - On cible toutes les variantes possibles pour être sûr */ +/* 1. DISPARITION TOTALE DU SELECT NATIF + On utilise opacity et position pour le rendre invisible sans casser + le fonctionnement du plugin, tout en évitant le doublon visuel. */ select.selectpicker, select[class*="selectpicker"], -.bootstrap-select > select.bs-select-hidden, -select.bs-select-hidden { +.bootstrap-select > select.bs-select-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; - height: 0 !important; - width: 0 !important; position: absolute !important; - pointer-events: none !important; + z-index: -1 !important; } -/* 2. STYLE DU BOUTON (Apparence form-control) */ +/* 2. STYLE DU BOUTON (L'interface visible) + On retire le "width: 100%" pour laisser le bouton s'adapter à son contenu + ou à sa colonne parente naturelle. */ .btn-form-select { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; @@ -1255,40 +1255,37 @@ select.bs-select-hidden { font-size: 0.82rem !important; padding: 0.5rem 0.75rem !important; border-radius: var(--radius-sm) !important; - width: 100% !important; - display: flex !important; + display: inline-flex !important; /* Permet au bouton de ne pas prendre toute la largeur */ align-items: center; justify-content: space-between; + min-width: 200px; /* Optionnel : définit une largeur minimale raisonnable */ } -/* 3. LE MENU DÉROULANT (Correction largeur) */ -.bootstrap-select.dropdown { - width: 100% !important; - display: block !important; +/* 3. NETTOYAGE DE L'ÉLÉMENT INTERNE (Ce que vous avez vu à l'image) + On s'assure qu'il n'y a pas de background ou de bordure parasite */ +.bootstrap-select .filter-option { + display: flex; + align-items: center; } +.filter-option-inner-inner { + background-color: transparent !important; + padding: 0 !important; + color: inherit !important; +} + +/* 4. LE MENU DÉROULANT + On le laisse s'adapter à la largeur du bouton parent */ .bootstrap-select .dropdown-menu { - min-width: 100% !important; - max-width: 100% !important; border: 1px solid #e2e8f0; box-shadow: var(--shadow-lg); - z-index: 9999 !important; -} - -/* 4. ZONE DE RECHERCHE */ -.bootstrap-select .bs-searchbox { - padding: 8px 10px !important; - background-color: #f8f9fa; + border-radius: var(--radius-md); + font-size: 0.82rem; } +/* 5. ZONE DE RECHERCHE */ .bootstrap-select .bs-searchbox .form-control { border: 1px solid #ced4da !important; font-size: 0.8rem !important; - width: 100% !important; -} - -/* 5. ÉVITER LE CONFLIT BOOTSTRAP 5 (Le secret est ici) */ -/* On annule les styles de form-select si jamais la classe a été ajoutée par erreur */ -select.selectpicker.form-select { - background-image: none !important; + background-color: #fff !important; } \ No newline at end of file diff --git a/Js/fonctions.js b/Js/fonctions.js index 764579cf..c0ff532f 100755 --- a/Js/fonctions.js +++ b/Js/fonctions.js @@ -91551,34 +91551,26 @@ function initSelectPicker() { } /** - * Fonction GÉNÉRIQUE Maître - * Gère la langue, évite les doublons et active la recherche + * Rafraîchit un SelectPicker de manière propre */ function ui_refresh_select(selector) { - var $el = $(selector); + let $el = $(selector); if ($el.length === 0) return; + // Détection de la langue pour les textes let codeLangue = $("#codeLangue").val(); let placeholder = (codeLangue === "en_US") ? 'Search...' : 'Rechercher...'; let noneText = (codeLangue === "en_US") ? 'Nothing selected' : 'Rien de sélectionné'; if (typeof $.fn.selectpicker !== 'undefined') { - // 1. On détruit l'existant - $el.selectpicker('destroy'); - - // 2. On réinitialise avec width: '100%' - $el.selectpicker({ + // La séquence 'destroy' puis initialisation est cruciale contre le doublon + $el.selectpicker('destroy').selectpicker({ style: 'btn-form-select', liveSearch: true, liveSearchPlaceholder: placeholder, noneSelectedText: noneText, - width: '100%', // FORCE la largeur du bouton - size: 'auto', - container: false // SURTOUT PAS de 'body' ici pour garder le contexte + width: 'auto', // Laisse le plugin décider de la largeur selon le contenu + container: false // Garde le menu dans son parent direct }); - - // 3. FORCE le rafraîchissement visuel pour corriger la largeur du menu - $el.selectpicker('refresh'); - $el.selectpicker('render'); } } \ No newline at end of file