Is it normal for a dropdown in the pusher not to show when using a sidebar? I tried setting overflow-visible but it didn't work. Any suggestions on how to resolve this?
Check out this JSFiddle example: https://jsfiddle.net/3djmjhn5/1/
Code:
$('.sidebar').sidebar({
context: '.pushable'
})
$('.dropdown').dropdown();.pushable {
height: auto!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<h2>Dropdown doesn't Show when using sidebar</h2>
<div class="pushable">
<div class="ui visible sidebar menu">
</div>
<div class="pusher">
<div class="ui inverted menu">
<div class="item">stuff</div>
<div class="ui dropdown item">
<div class="default text">select one</div>
<input type="hidden" value="">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Stuff 1</div>
<div class="item">Stuff 2</div>
<div class="item">Stuff 3</div>
<div class="item">Stuff 4</div>
<div class="item">Stuff 5</div>
<div class="item">Stuff 6</div>
</div>
</div>
</div>
</div>
</div>
<h2>Will Show Normally</h2>
<div class="ui inverted menu">
<div class="item">stuff</div>
<div class="ui dropdown item">
<div class="default text">select one</div>
<input type="hidden" value="">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Stuff 1</div>
<div class="item">Stuff 2</div>
<div class="item">Stuff 3</div>
<div class="item">Stuff 4</div>
<div class="item">Stuff 5</div>
<div class="item">Stuff 6</div>
</div>
</div>
</div>