Semantic-ui Dropdown-Liste wird mit Eingabefeld überlagert

Wie Sie in jsfiddle aus irgendeinem Grund sehen können, geht die erste Eingabe-Dropdown-Liste unter das zweite Eingabefeld. Da ich nicht die ganze jQuery verwenden möchte, habe ich ein benutzerdefiniertes Javascript erstellt, um das Dropdown zu erstellen.Semantic-ui Dropdown-Liste wird mit Eingabefeld überlagert

Gibt es eine Möglichkeit, das Dropdown über das Eingabefeld zu bewegen? Vielen Dank für Ihre Zeit

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>

Quelle

2017-07-24 August

Sie zuerst

#selection__menu{ 
    z-index:100; 
}

dann shout Sie setzen z-Index der zweiten Dropdown-Liste etwas weniger als 100 hinzufügen, zum Beispiel sollte -1 ,

style="z-index: -1;"

so zweiten Teil wäre wie diese

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

Quelle

2017-07-24 12:58:09

Ich konnte diese Antwort nicht einfach auf den bereitgestellten Code anwenden. Ich denke, diese Antwort könnte verbessert werden, indem man entweder spezifischer oder allgemeiner wird. Könnten Sie genau die Teile angeben, für die der Z-Index angepasst werden muss? Oder könnten Sie alternativ eine allgemeinere Antwort darauf geben, wie der z-Index in diesem Zusammenhang funktioniert? – OliverRadini

selection__menu ist die ID des ersten Dropdown-Bereichs, der über das zweite Dropdown hinausgeht, daher sollten wir den Z-Index auf etwas höher setzen wie 100 –

Ich habe bereits erwähnt, dass Änderungen erforderlich sind, die Sie in Ihrem Code bearbeiten müssen. –

Stellt sich heraus, ich nur benötigt, um z-Index für die übergeordneten Umhüllungen <div class="ui fluid search selection dropdown" style="z-index: 5"> zum ersten und <div class="ui fluid search selection dropdown" style="z-index: 2"> zum zweiten zu verändern.

Quelle

2017-07-24 14:49:40 August

Wenn dies korrekt ist, können Sie diese Antwort – OliverRadini

akzeptieren Ich werde es nur in 2days @OliverRadini tun können – August

Semantic-ui Dropdown-Liste wird mit Eingabefeld überlagert

Antwort

Verwandte Themen