9
votes

Comment changer zIndex dans le menu déroulant React-Select

J'utilise la bibliothèque react-select pour créer une liste déroulante de saisie semi-automatique. J'ai utilisé 2 parallèles déroulants si le 2ème a des données et j'ouvre le premier, puis le problème zIndex survient. voir l'image

reactjs react-select

1 commentaires

Veuillez ajouter un exemple minimal, complet et vérifiable pour nous montrer ce que vous avez fait jusqu'à présent.

4 Réponses :

20
votes

Essayez cette façon hacky de définir zIndex et faites-moi savoir si cela a fonctionné :)

<Select
  styles={{
    // Fixes the overlapping problem of the component
    menu: provided => ({ ...provided, zIndex: 9999 })
  }}
  value={selectedOption}
  onChange={evt => onSelectChange(evt, index)}
  options={options}
/>

2 commentaires

en fonction de la démarque de @ user11124592 et du CSS, votre solution est complètement valide et n'est pas nécessaire "hacky" :)

@Vicente merci pour votre réponse. Si quelqu'un d'autre vient ici et a des problèmes avec cette approche. Vous utilisez peut-être le portail de react-select que vous devez dans ce cas utiliser: menuPortal: provided => ({ ...provided, zIndex: 9999 })

-2
votes

Changer le zIndex du composant parent de cette sélection

<div style={{zIndex:1000}}>
  <React-Select-Component/>
</div>

0 commentaires

7
votes

Ajoutez ces lignes dans votre balise All Select :

<Select
......

 1. menuPortalTarget={document.body} 
 2. styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}

......
/>

0 commentaires

1
votes

Après avoir vu la demi-douzaine de problèmes connexes, sans toutefois trouver de solution, j'en ai trouvé une.

<Select
    menuPortalTarget={document.body}
    menuPosition={'fixed'} 
/>

Ajoutez ces deux options à votre composant Select.

Cela semble nous faire de la nouvelle fonctionnalité React Portal .

EDIT: Si vous faites ce qui précède, vous rencontrez alors ce problème avec le menu ancré à la page. https://github.com/JedWatson/react-select/issues/4088

0 commentaires