Select2 menu déroulant modification css

Question

J'ai cette situation:

et je voudrais déplacer le .select2-dropdown .select2-dropdown--below à left: 0 et witdth: 100% (par rapport à la fenêtre). Comme vous pouvez le voir, je lui ai déjà ajouté un top, mais cela ne fonctionne pas pour les autres propriétés.

J'utilise la dernière version du plugin.

J'ai ajouté un exemple. Voyez-vous cette heure? Je voudrais que la liste déroulante commence à partir de la gauche et soit pleine largeur comme la règle.

jsFiddle

Answer 1

Ici, vous allez: https://jsfiddle.net/9w1Lgbt5/

C'est css dont vous avez besoin:

span.select2-dropdown.select2-dropdown--below { 
    top: 30px !important;  
    width:100vw !important; 
    transform:translate(-100px,0) !important; 
} 

100vw signifie viewport width, et il utilisera 100% de la largeur de la fenêtre. Un autre problème était que span.select2-dropdown.select2-dropdown--below est enfant de select2 class (qui est déplacé par 100px à partir de la gauche). Il n'était pas possible auparavant de changer sa position gauche sans changer l'élément enfant à position:fixed mais avec transform c'est possible. Le premier paramètre est 100px car tout select2 est déplacé -100px, donc nous devons traduire l'enfant par 100px vers la gauche pour correspondre à la position de la fenêtre gauche.