bootstrap-multiselect options trop longtemps, les dépassements de conteneur
Je suis en utilisant David Stutz du Bootstrap-Mutliselect. J'ai utilisé le code suivant pour le raccorder à tous les sélectionner des éléments dans ma page:
$(function () {
$("select").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ multiple: false }
);
$("[multiple]").multiselect(
{ enableFiltering: true },
{ maxHeight: 5 },
{ enableCaseInsensitiveFiltering: true }
);
});
Le code ci-dessus fonctionne parfaitement. Le problème est que les options à long texte, les valeurs, les dépassements de son conteneur des limites que par la capture d'écran suivante, au lieu de l'emballage sur une nouvelle ligne.
Comment puis-je résoudre ce problème? De préférence, si il y a un moyen de le faire en changeant simplement de mon ci-dessus .code js qui serait un bonus.
- vous pouvez résoudre ce problème en CSS, mais j'ai juste essayé avec la dernière version de cette bibliothèque & il semble être la manipulation de la largeur par l'expansion de la largeur de la liste déroulante contenant lui-même - codepen.io/nitishdhar/stylo/lHyas
- La fixant dans n'importe quel moyen est le plus rapide et le plus facile
- J'ai le même problème. La réponse de KyleMit ne fonctionne pas.
Vous devez vous connecter pour publier un commentaire.
Par défaut, rien ne doit être l'application d'une largeur à la
.multiselect-container
, de sorte qu'il prendra autant de place que nécessaire pour afficher tous les articles sur une seule ligne:Cependant, si quelque chose est l'application d'une largeur à la
.multiselect-container
, vous rencontrerez le problème que vous avez identifié:Le problème est que bootstrap multiselect utilise un dropdown-menu auquel le bootstrap de la bibliothèque s'applique le code suivant:
Afin de résoudre ce problème, nous pouvons revenir white-space pour qu'il est normal d'habillage de mode avec le code css suivant:
La démo en jsFiddle
Quelques remarques:
maxHeight
prend le nombre de pixels, donc passer dans5
fera le contrôle que 5px élevé. Vous devez passer par quelque chose commemaxHeight: 200
enableCaseInsensitiveFiltering
fait la même chose queenableFiltering
de sorte que vous n'avez pas besoin de les deux. Décidez si vous voulez de la casse ou pas et puis définissez un vraiMise à jour avec plus d'explications
@user2105811, Vous n'avez pas besoin de cibler l'étiquette spécifiquement et vous n'avez pas besoin d'utiliser
!important
voici la structure HTML et CSS qui est généré pour cette solution:white-space
est toujours héritées du parent, de sorte que le ciblagelabel
fera la même chose que le ciblage desa
, mais de traiter le problème à la racine.Votre suggestion d'utilisation:
ne fonctionne pas. Au lieu de cela, j'ai ajouté la balise d'étiquette pour le CSS et le régler à !important. Maintenant, il fonctionne.
!important
. Vous devez l'utiliser uniquement pour remplacer une ancienne règle que vous n'avez pas de contrôle sur lequel quelqu'un d'autre a utilisé abusivement!important
.