0
votes

comment puis-je tirer le menu déroulant de react-select ci-dessus (c'est z-index) ExpansionPanel?

J'ai utilisé react-select dans ExpansionPanel (un composant de material-ui), cela a fait d'ExpansionPanel un scroll indésirable. comment puis-je résoudre ce problème? J'ai essayé de changer le z-index, mais je n'ai pas fonctionné. considérez la troisième sélection dans l'image, la liste déroulante a été masquée par ExpansionPanel. Merci d'avance.

                <Select
                   value={state.selectedPerson}
                   onChange={handleMitarbeiterChange}
                   options={state.peopleOptions}
                   textFieldProps={{
                   label: 'Mitarbeiter',
                   id: "mitarbeiter-required",
                   InputLabelProps: {
                     shrink: true,
                   },
                 }}
                />

material-ui react-select z-index

0 commentaires

3 Réponses :

4
votes

J'ai cherché dans de nombreuses ressources et essayé de nombreuses façons (telles que z-index, débordement, position, ...), aucune d'entre elles n'a fonctionné. enfin j'ai trouvé la réponse sur ce lien: entrez la description du lien ici

et c'est la réponse qui a fonctionné pour moi:

Si vous utilisez la version 2 de react-select, vous pouvez utiliser le prop menuPortalTarget pour rendre la liste déroulante dans un conteneur parent (par exemple, le corps) du pied de page.

<Select
    { ... }
    menuPortalTarget={document.querySelector('body')}
/>

0 commentaires

1
votes

Ajoutez ces lignes en gras dans votre balise All Select

<Select ......

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

...... />

0 commentaires

0
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