CODEWITHSUNDEEP
javascripthtmlcsssemantic-ui
August
August

Reputation: 1819

Semantic-ui dropdown list being overlaid with input field

As you can see in jsfiddle for some reason the first input dropdown list goes under the second input field. Because I don't want to use the whole of jquery I made some custom javascript to create the drop down.

Is there any way to make the dropdown go over the input field? Thank you for your time

html: 

<div class="field"> 
      <label>Institution</label>
      <div class="field">
        <div class="ui fluid search selection dropdown">
          <input class="search contains-data" type="text" name="institution name" id="selection__text" placeholder="Select institution">
          <i class="dropdown icon"></i>
          <div class="menu transition hidden"id="selection__menu">
                        <div class="item">Hellow</div>
            <div class="item">Hellow</div>
            <div class="item">Hellow</div>
                        <div class="item">Hellow</div>
            <div class="item">Hellow</div>
            <div class="item">Hellow</div>         
          </div>
        </div>
      </div>
    </div>
    <div class="field">
      <label>Location</label>
      <div class="field">
        <div class="ui fluid search selection dropdown">
          <input class="search contains-data" type="text" name="institution name" placeholder="Select location">
          <i class="dropdown icon"></i>
          <div class="menu transition hidden">
            <div class="item">Hellow</div>
            <div class="item">Hellow</div>
            <div class="item">Hellow</div>
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

Views: 1672

Answers (2)

August
August

Reputation: 1819

Turns out I just needed to change z-index on the parent wrappers <div class="ui fluid search selection dropdown" style="z-index: 5"> to the first one and <div class="ui fluid search selection dropdown" style="z-index: 2"> to the second one.

Upvotes: 1

siavash mohammadi
siavash mohammadi

Reputation: 11

you should first add

#selection__menu{
  z-index:100;
}

then you shout set z-index of second dropdown to something less than 100 , for example -1,

style="z-index: -1;"

so second part would be like this

<label>Location</label>
      <div class="field">
<div class="ui fluid search selection dropdown" style="z-index: -1;">

Upvotes: 0

Related Questions