Dropdown menu selections generating menu another field

jacewunun 0
Viewed 23

I cannot post the full code because it is simply too long, so the JSFiddle is what will have to do here:

https://jsfiddle.net/c0ffee/pew9f0oc/1/

My issue specifically is this:

https://i.imgur.com/g9zqHGK.png

the issue is that when you click on the dropdown menu you see the options but you cannot click on them, it appears that they are hidden behind the text input that's below that menu.

                        <form>
                            <div class="input-field m-b-30">
                                <input type="text" id="firstName" placeholder="First Name" name="name" required="">
                                <label for="fullName">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Business Name</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Phone Number</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
                                <label for="emailAddress">Email</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
                                <label for="subject">Subject</label>
                            </div>
                            <div class="input-field m-b-30">
                                <label for="cars">Choose a car:</label>

                                <select name="cars" id="cars">
                                  <option value="volvo">Volvo</option>
                                  <option value="saab">Saab</option>
                                  <option value="mercedes">Mercedes</option>
                                  <option value="audi">Audi</option>
                                </select>
                            </div>
                            <div class="input-field textarea-field m-b-30">
                                <textarea id="message" placeholder="Message" name="message"></textarea>
                            </div>

                            </div>
                            <div class="input-field">
                                <button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
                            </div>
                        </form>

any suggestions on how to fix this?

jquery css html
1 Answers

Without digging too deep in the morass of CSS and javascript, you can get a quick fix with some z-indexing because, yes that styled dropdown is behind the textarea below it. Change the container to contain this css style='position:relative;z-index:10'

<div class="input-field m-b-30" style='position:relative;z-index:10'>
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
Kinglish0
Related