Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

68
Views
React Select Overlaps With Label

I am using react-select ^5.1.0 and my options and values are displayed well. I have a small issue when scrolling the options, a select word overlapps the options. I have attached an image that can explain better. What can i do to remove the select word on my options? It blocks them.

My code :

const methods = useForm();

<label> Line Manager : </label>
   <Controller
     control={methods.control}
     className="basic-single"
     classNamePrefix="select"
     styles={{ marginTop : '10px', marginBottom : '10px'}}
     name="line_manager"
      render={({ value, ref }) => (
       <Select
         inputRef={ref}
         options={items}
         className="basic-multi-select"
         value={items.find(c => c.fullnames === value)}
         onChange={val => setLineManager(val.id)}
         getOptionLabel={items => items.fullnames}
         getOptionValue={items => items.id}
       />
     )}
  />

my select

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Looks like the label on those select boxes have a higher z-index than that of the options box. Ideally, you need to increase the z-index of the options overlay.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs