0

Tengo un formulario en ReactJs, el cual le puse un React Select. Ambos, funcionan correctamente como se muestra a continuación:

<div className="login templete d-flex justify-content-center align-items-center 100-w 100-vh">
                         <div className="50-w p-5 rounded bg-white">
                         
                      <h3>Antecedentes Hereditarios y Familiares-Entrada de Datos</h3> 
                               <div className="input-group"> 
                                     <br></br><br></br>
                              <div className="form-group" > 
                                   <label htmlFor="">Padecimiento:</label>
                                 <input type="text" onChange={e=>padecimientochange(e.target.value)} value={txtpadecimiento || ''}  name="txtpadecimiento" id="txtpadecimiento" className="form-control" aria-describedby="helpId" size={15}  placeholder="Teclea el padecimiento"  >
                                 </input>
                             </div>   

                           <div className="form-group">
                               <label htmlFor="">Familiar que lo padece</label>
                                 <Select 
                                         className='search-line'
                                        placeholder= 'Seleccione Familiar que tiene el padecimiento' 
                                       options={familiares.map(sup3=>({label: sup3.Nom_tipo_familiar, value: sup3.Id_Tipo_familiar }))}
                                  Change={handleSelectChangefamiliares}  
                                 />
                            </div>  
                          <br></br><br></br><br></br><br></br>  

                          <div className="input-group">
                              <span className="input-group-btn">                                        
                          <button className="btn btn-success" onClick={agregarAntecedenteHereyFam} aria-label="">Agregar el padecimiento</button>
                               &nbsp;  
                              </span>                                    
                           </div>   
                       </div>  
            </form>    
                         </div>
</div>                         

El problema, es que cuando carga información la muestra "atrás del formulario" como se muestra en la imagen: introducir la descripción de la imagen aquí

No entiendo, que es lo que pasa. ¿Me falta agregar alguna línea de código al React Select?, ¿Cómo se resuelve esto?. Saludos y Gracias por su ayuda.

1 respuesta 1

0

En este caso, solo deberíamos asignar un valor superior al z-index de tu react select. Quedaría de esta manera en tu archivo css:

.search-line{
     z-index: 999;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.