How to show Bootstrap dropdown above everything? - html

Question

I have this problem:
(sorry for the Greek).
I want this dropdown menu, positioned on top of everything else on the page.
I don't think that I can use position:fixed, as I want the dropdown to always be below the blue button above it.
Here is the html (I'm using bootstrap):
https://jsfiddle.net/9pLg1kLy/2/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
<div id="navbar-root-div" class="sidebar-nav navbar-collapse in">
<ul class="nav" id="side-menu">
<!--<sidebar-search></sidebar-search>-->
<li ng-show=currentUser ui-sref-active="active"> <a ui-sref="dashboard.map"><i class="fa fa-map fa-fw"></i> Χάρτης</a>
<!-- </li>
<li ng-show=currentUser ui-sref-active="active">
<a ui-sref="dashboard.chart"><i class="fa fa-line-chart fa-fw"></i> Δείκτες Απόδοσης</a>
</li>-->
<li id="deleteDevicePathsID" ng-show="devicePaths.p1" ui-sref-active="active"> </i> Διαγραφή Διαδρομών
</li>
<li ng-class="{active: collapseVar==1}" ng-cloak ng-show="devicesLoaded && currentUser">{{dropDown}} <a href="" ng-click="check(1)"><i class="fa fa-car fa-fw"></i> Συσκευές<span ng-show=DevicesArray
class="fa arrow"></span></a>
<ul id="deviceDataList" class="nav nav-second-level" collapse="collapseVar!=1">
<li ng-show=devicesLoaded class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση..."> <span class="input-group-btn">
<!--<button class="btn btn-primary dropdown" type="button"></button> -->
<div class="dropdown">
<a id="toolsDrop" href="" role="button"
class="dropdown-toggle btn btn-primary"
data-toggle="dropdown"
style="padding: 6px 6px 6px 8px;">Φίλτρα <b
class="caret"></b></a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>
<a href="" style="padding: 6px; min-width: 0"
ng-click="statusFilter = movingFilter"> <img
src="misc/images/pinOntheMove.png"> Κινείται</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = stoppedFilter"> <img
src="misc/images/pinStopped.png"> Σε Στάση</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = unknownFilter"> <img
src="misc/images/pinUnknown.png"> Άγνωστο</a>
</li>
<li class="divider hidden-xs"></li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = allFilter"> <i class="fa fa-th-list"></i> Όλα</a>
</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">
<li ng-init="third=!third" ng-class="{active: multiCollapseVar==3}" ng-repeat="device in DevicesArray | filter:dataFilter | filter:searchText | filter: statusFilter" id="{{device.DeviceId}}" lat="{{device.DeviceData.Position.Y}}" lng="{{device.DeviceData.Position.X}}" ui-sref-active="active"> <a style="font-weight:bold; border-style: none none solid none;" href="" ng-click="CenterMapOnPosition(device.DeviceData.Position, device.DeviceData.DeviceId)"><img
width="26"
height="26"
ng-src="misc/images/pin{{device.DeviceData.State}}.png">
{{device.Name}} <p style="font-weight: normal; color: #002a80">{{device.DeviceData.Location}}</p></a>
</li>
</ul>
</li>
</ul>
<li ng-show="devicesLoaded && currentUser" ui-sref-active="active"> </i><i ng-hide="labelsShown" class="fa fa-square-o fa-fw"></i> Ονόματα Οχημάτων
</li>
<li ng-show=currentUser ui-sref-active="active"> </i> Αποσύνδεση
</li>
</ul>
</div>
</div>
The dropdown menu is at line 32.

Answer 1

Try to add z-index with position:relative that's make it visible

Answer 2

Try adding a z-index on the element which is cut off. This will bring the element to the front