Je rencontre un problème avec ng-select lorsqu'il est utilisé dans un div scrollable.
Veuillez trouver la capture d'écran -
Problème: l'écart se situe entre la zone de texte de recherche et la liste déroulante, le centre-ville devrait se déplacer avec la zone de saisie de recherche. Pour reproduire le problème - https://stackblitz.com/edit/ng- select-uygqu1? file = app% 2Fapp.component.ts
cliquez sur le premier menu déroulant (ng-select). Cela ouvrira les options disponibles. Maintenant, faites défiler en utilisant deux doigts sur le clavier de la souris de l'ordinateur portable / faites défiler la souris.
Toute aide est très appréciée.
Merci d'avance.
3 Réponses :
assurez-vous que la position de la liste déroulante est relative et qu'aucun espacement supplémentaire n'est appliqué
Vous ajoutez la liste déroulante au corps, pas au ng-select, donc par définition, il calculera la position du ng-select en fonction du corps, c'est-à-dire sa dernière position reçue.
Il ne mettra pas à jour la position une fois ouverte lorsque vous faites défiler ( non pris en charge ), vous devez fermer le menu déroulant lorsque le défilement se produit ( non pris en charge par ng-select - problème est actuellement ouvert - suggestions également fournies par l'assistance dans le lien ), puis ouvrez le menu déroulant si nécessaire.
Même si vous ne fermez pas la liste déroulante et qu'elle met à jour miraculeusement la position lors du défilement, la liste déroulante s'affichera même si le ng-select est caché dans le débordement, ce qui ne sera pas joli.
Je suggère de fermer la liste déroulante lorsque le défilement est en cours. Vous ne pouvez pas avoir à la fois un positionnement absolu et l'afficher en dehors du tableau, puis le masquer lorsque le ng-select est masqué. JQuery peut-être, mais je ne sais pas grand-chose à ce sujet.
::ng-deep .ng-dropdown-panel {
left: 0 !important;
right: 0 !important;
margin: 0 auto;
}
//this worked for me perfectly fine
Veuillez ne pas publier uniquement le code comme réponse, mais également expliquer ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement plus utiles et de meilleure qualité, et sont plus susceptibles d'attirer des votes positifs.
merci beaucoup pour les conseils, je vais essayer d'améliorer mes réponses
Bonjour, tout le monde a de la chance. Veuillez aider.