vqf

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;
 }

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');
     }
 }