fan
This commit is contained in:
parent
c525e97fcb
commit
aec34a0d2d
|
|
@ -1228,64 +1228,87 @@ h6 a:hover {
|
|||
.bg-warning-ghost { background: rgba(243, 156, 18, 0.12); }
|
||||
.bg-primary-ghost { background: rgba(33, 46, 83, 0.05); }
|
||||
|
||||
/* --- FIX SELECTPICKER GLOBAL --- */
|
||||
/* ============================================================
|
||||
FIX BOOTSTRAP-SELECT (SELECTPICKER) - NEUTRAL PRO THEME
|
||||
============================================================ */
|
||||
|
||||
/* Cache l'élément select original de manière invisible pour le DOM */
|
||||
/* 1. DISPARITION RADICALE DU SELECT NATIF (Évite les doublons) */
|
||||
select.selectpicker {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Si Bootstrap-Select crée une copie invisible mais qui prend de la place */
|
||||
.bootstrap-select > select.selectpicker {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0 !important;
|
||||
position: absolute !important;
|
||||
z-index: -100 !important;
|
||||
}
|
||||
|
||||
/* 2. STYLE DU BOUTON (Apparence form-control) */
|
||||
.btn-form-select {
|
||||
background-color: #fff !important;
|
||||
background-color: #ffffff !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
color: var(--color-primary) !important;
|
||||
font-size: 0.82rem !important;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* État Focus */
|
||||
.bootstrap-select .dropdown-toggle:focus {
|
||||
outline: none !important;
|
||||
border-color: var(--color-primary-light) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-primary-ghost) !important;
|
||||
}
|
||||
|
||||
/* Ajustement de la zone de recherche dans le dropdown */
|
||||
/* 3. LE MENU DÉROULANT (Correction largeur et affichage) */
|
||||
.bootstrap-select.dropdown {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.bootstrap-select .dropdown-menu {
|
||||
min-width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
font-size: 0.82rem;
|
||||
z-index: 9999 !important; /* Assure qu'il passe devant tout */
|
||||
}
|
||||
|
||||
/* 4. ZONE DE RECHERCHE (Live Search) */
|
||||
.bootstrap-select .bs-searchbox {
|
||||
padding: 8px 10px !important;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.bootstrap-select .bs-searchbox .form-control {
|
||||
border: 1px solid #ced4da !important;
|
||||
background-color: #fff !important;
|
||||
font-size: 0.8rem !important;
|
||||
padding: 6px 10px !important;
|
||||
border-radius: var(--radius-sm) !important;
|
||||
}
|
||||
|
||||
/* Limite la largeur du menu déroulant quand il est attaché au body */
|
||||
body > .bootstrap-select.dropdown {
|
||||
max-width: 400px !important; /* Ajustez selon vos besoins */
|
||||
width: auto !important;
|
||||
/* 5. ÉLÉMENTS DE LA LISTE */
|
||||
.bootstrap-select .dropdown-menu li a {
|
||||
padding: 8px 12px !important;
|
||||
color: var(--color-primary);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
/* Assure que la boîte de recherche reste compacte */
|
||||
.bootstrap-select .dropdown-menu {
|
||||
min-width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-shadow: var(--shadow-lg);
|
||||
.bootstrap-select .dropdown-menu li a:hover,
|
||||
.bootstrap-select .dropdown-menu li.selected a {
|
||||
background-color: var(--color-primary) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Fix pour l'affichage plein écran */
|
||||
.bootstrap-select.show {
|
||||
width: 100% !important;
|
||||
/* Correction pour les petits écrans / colonnes étroites */
|
||||
.bootstrap-select .filter-option {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -91563,16 +91563,22 @@ function ui_refresh_select(selector) {
|
|||
let noneText = (codeLangue === "en_US") ? 'Nothing selected' : 'Rien de sélectionné';
|
||||
|
||||
if (typeof $.fn.selectpicker !== 'undefined') {
|
||||
$el.selectpicker('destroy').selectpicker({
|
||||
// 1. On détruit l'existant
|
||||
$el.selectpicker('destroy');
|
||||
|
||||
// 2. On réinitialise avec width: '100%'
|
||||
$el.selectpicker({
|
||||
style: 'btn-form-select',
|
||||
liveSearch: true,
|
||||
liveSearchPlaceholder: placeholder,
|
||||
noneSelectedText: noneText,
|
||||
width: '100%', // Assure que le bouton prend la largeur de la colonne
|
||||
container: 'body',
|
||||
dropdownAlignRight: 'auto',
|
||||
// On force la taille du menu déroulant
|
||||
size: 'auto'
|
||||
width: '100%', // FORCE la largeur du bouton
|
||||
size: 'auto',
|
||||
container: false // SURTOUT PAS de 'body' ici pour garder le contexte
|
||||
});
|
||||
|
||||
// 3. FORCE le rafraîchissement visuel pour corriger la largeur du menu
|
||||
$el.selectpicker('refresh');
|
||||
$el.selectpicker('render');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user