Ich habe ein Modal, wo ich Dropdown-Elemente im Element haben.Dropdown ignorieren Eltern Überlauf
Das Problem ist, da ich einen Überlauf gesetzt habe, erscheint das Dropdown, obwohl es scheint, nicht über dem Modal. Ich verstehe, weil es ist, weil ich einen Überlauf gesetzt habe: auto auf dem Elternteil.
Gibt es eine Möglichkeit über CSS, dass ich die Eltern ignorieren und das Dropdown über dem "Modal" anzeigen kann?
Sie sehen in dem Beispiel, dass der Inhalt in der roten Linie sichtbar ist, wenn Sie blättern. Welches ist das erwartete Verhalten basierend auf meinem Code im Moment. Welche Anpassung muss ich vornehmen, um das Dropdown über dem Modal zu zeigen?
Versuchte Fixierung mit Z-Index und ich irgendwo auf SO gelesen, um die Großeltern relativ Position zu setzen.
Bevorzugen Sie eine CSS-Lösung.
Danke!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
danke! Wenn jedoch mehrere Elemente vorhanden sind, bei denen der Überlauf ausgelöst wird, funktioniert die Lösung nicht, da sie zum Zeitpunkt des Ladens der Seite berechnet wird. –