Éviter que les sélecteurs ne dépassent ou n'aient pas de largeur du tout #4

La lib select2 cache les <select> originaux et ajoute un élément de substitution à la suite.

Elle essaye de faire en sorte que cet élément ait la même largeur que le <select> original en lui ajoutant style=width: Npx. Le problème c'est que c'est une taille fixe, et cela peut poser problème notamment dans 2 cas :

Si le conteneur du <select> change de taille après l'initialisation de select2, alors l'élément peut dépasser.
Si le <select> est invisible au moment de l'initialisation de select2, alors on se retrouve avec style=width: 0px.

Cf. onglets de saisies spip-contrib-extensions/saisies!240

Une solution serait de mettre cette règle à la place du width: Npx :

width: clamp(M, Npx, 100%);

M est une largeur minimale arbitraire qui sera utilisé en fallback quand la largeur initiale est pas connue
Npx est la largeur fixe de référence
100% évite que ça dépasse du conteneur

Je vais propose ça en PR dans la lib, mais en attendant que ça soit accepté/validé/intégré, le plugin pourrait peut-être s'en charger lui-même : juste après l'init, regarder s'il y a cette largeur en dur, et remplacer la règle.

ping @maieul @marcimat

La lib select2 cache les `<select>` originaux et ajoute un élément de substitution à la suite. Elle essaye de faire en sorte que cet élément ait la même largeur que le `<select>` original en lui ajoutant `style=width: Npx`. Le problème c'est que c'est une taille fixe, et cela peut poser problème notamment dans 2 cas : * Si le conteneur du `<select>` change de taille après l'initialisation de select2, alors l'élément peut dépasser. * Si le `<select>` est invisible au moment de l'initialisation de select2, alors on se retrouve avec `style=width: 0px`. Cf. onglets de saisies spip-contrib-extensions/saisies!240 Une solution serait de mettre cette règle à la place du `width: Npx` : ```css width: clamp(M, Npx, 100%); ``` * M est une largeur minimale arbitraire qui sera utilisé en fallback quand la largeur initiale est pas connue * Npx est la largeur fixe de référence * 100% évite que ça dépasse du conteneur Je vais propose ça en PR dans la lib, mais en attendant que ça soit accepté/validé/intégré, le plugin pourrait peut-être s'en charger lui-même : juste après l'init, regarder s'il y a cette largeur en dur, et remplacer la règle. ping @maieul @marcimat

PS : à priori cela ne serait à faire que quand l'option width vaut element, ce qui est le cas par défaut, cf. https://select2.org/appearance#container-width

PS : à priori cela ne serait à faire que quand l'option `width` vaut `element`, ce qui est le cas par défaut, cf. https://select2.org/appearance#container-width

oui je pense que c'est une bonne option. Pour l'intégration dans le plugin a voir : a part dans saisies on a d'autres cas où il aurait urgence ?

Labels Milestones

Éviter que les sélecteurs ne dépassent ou n'aient pas de largeur du tout #4