list-group with dropdown and input-group with button -> button displayed over opened dropdown
Created by: simon11196
I have some code like the following example. when i open the dropdown, the button of the input-group in the next list-group-item ist showed over the dropdown, while the dropdown-menu is hovered. When the mouse is outside the dropdown-menu, all is as normal...
<div class="col-2">
<ul class="list-group">
<li class="list-group-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-cubeBlue" type="button">Button</button>
</div>
</div>
</li>
</ul>
</div>