How to make drop down appear in front of div? - html

Question

Hi I have arrange my top navigation in such a way that on the left contains 3 different button, in the middle contains a long button and on the right contains a 3 dots button.
the 3 dots is a drop down menu. However, my drop down menu seems to appear behind the div panel container. I read many online solution saying is caused by overflow: hidden however in my case, i need the overflow:hidden in order for left, center and right alignment to work. However, this cause my drop down menu to appear behind. Any idea how this can be solved? below is my code:
css:
body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
}
.page-container {
height: 80vh;
margin-top: 10px
}
.panel-container {
display: flex;
height: 100%;
flex-direction: row;
border: 2px solid #000;
overflow: auto;
xtouch-action: none;
}
.....
....
/**********Alignment for top navigation*************/
.topheader {
margin-bottom:7px;
width:100%;
}
.topright{
width: auto;
overflow:hidden;
background-color:#1E90FF;
color:#fff;
font-weight:bold;
font-size:19px;
margin:3px;
border-radius:7px;
padding:5px;
text-align:center;
}
.topleft{
float:left;
width:350px;
padding:3px;
}
.nav-tab .nav-items {
border-style: none;
background-color:#1E90FF;
font-weight:bold;
font-size:12px;
margin:1px;
border-radius:5px;
padding:5px;
}
.nav-tab .nav-link {
color: #fff;
}
.threedots:after {
content: '\2807';
color: #fff;
font-size:17px;
}
HTML:
<div class="page-container">
<div class="topheader">
<div class="topleft">
<ul class="nav nav-tab" id="myTab" role="tablist">
<li class="nav-items">
<a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one"
aria-selected="true">2019-01-01</a>
</li>
<li class="nav-items">
<a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two"
aria-selected="false">2019-01-02</a>
</li>
<li class="nav-items">
<a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three"
aria-selected="false">2019-01-03</a>
</li>
</ul>
</div>
<div class="topright">
<div class="row">
<div class="col-md-11">
Kelvin
</div>
<div class="col-md-1">
<div class="dropdown">
<button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="panel-container">
....
....
....
Below is where the drop down menu is being hidden

Answer 1

Try display: flex on topheader and add flex-grow: 1 on topright div. You should be able to achieve the header alignment without overflow: hidden. Also remove float: left from topleft
body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
}
.page-container {
height: 80vh;
margin-top: 10px
}
.panel-container {
display: flex;
height: 100%;
flex-direction: row;
border: 2px solid #000;
overflow: auto;
xtouch-action: none;
}
.topheader {
margin-bottom: 7px;
display: flex;
}
.topright {
background-color: #1E90FF;
color: #fff;
font-weight: bold;
font-size: 19px;
margin: 3px;
border-radius: 7px;
padding: 5px;
text-align: center;
flex-grow: 1;
}
.topleft {
width: 350px;
padding: 3px;
}
.nav-tab .nav-items {
border-style: none;
background-color: #1E90FF;
font-weight: bold;
font-size: 12px;
margin: 1px;
border-radius: 5px;
padding: 5px;
}
.nav-tab .nav-link {
color: #fff;
}
.threedots:after {
content: '\2807';
color: #fff;
font-size: 17px;
}
.dropdown-menu {
color: #000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="page-container">
<div class="topheader">
<div class="topleft">
<ul class="nav nav-tab" id="myTab" role="tablist">
<li class="nav-items">
<a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one" aria-selected="true">2019-01-01</a>
</li>
<li class="nav-items">
<a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two" aria-selected="false">2019-01-02</a>
</li>
<li class="nav-items">
<a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three" aria-selected="false">2019-01-03</a>
</li>
</ul>
</div>
<div class="topright">
<div class="row">
<div class="col-md-11">
Kelvin
</div>
<div class="col-md-1">
<div class="dropdown">
<button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

The problem seems to be, that your container class of the menu topright has set the property overflow to hidden. That causes, that the part of the dropdown which is higher than the container is hidden. If you remove the overflow:hidden part, the dropdown should be shown correct.