Menu
Bootstrap dropdown is getting clipped, i looked at all option mentioned in following questions but did not work.
Bootstrap drop down cutting off
Twitter Bootstrap Button dropdown z-index layering issue
z-index issue with twitter bootstrap dropdown menu
Requirements
Plunker: http://plnkr.co/edit/HOKKYJ?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Clipping problem</title>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
angular.module("myApp", []).controller("MainCtrl", function($scope) {
});
</script>
</head>
<body style="height:100%;" ng-app="myApp">
<div style="background: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;">
<div ng-repeat="num in [1,2,3,4,5]">
<div style="background: bisque; margin:5px; height: 50px;">
<div style="position: relative; float: right">
<button class="dropdown-toggle" data-toggle="dropdown">Click me Brother...!!</button>
<div class="dropdown-menu">
<div style="text-wrap: none; white-space: nowrap;">I am a text......................................!!</div>
<div style="text-wrap: none;white-space: nowrap;">I am a also text.................................!!</div>
<div style="text-wrap: none;white-space: nowrap;">Another text........................................................................................!!</div>
<div style="text-wrap: none;white-space: nowrap;">One more text.............................!!</div>
<div style="text-wrap: none;white-space: nowrap;">Aha one more text...........................................................................!!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>With problem:
What do i want:
Thanks in advance
506
Problem
I use Bootstrap 3 and had the same problem with a div container with overflow auto. It contains a dropdown that must pop out from the container.
Solution
The solution is to set position:fixed to the dropdown and then calculate coordinates with jQuery on click. Coordinates is calculated with offset() so its relative to document window instead of elements parent.
This solution probably also works for overflow:hidden containers.
CSS
.somecontainer .dropdown-menu {
position:fixed;
}
jQuery
$(".somecontainer .dropdown").on('click', function() {
$(this).find('.dropdown-menu').css('top',$(this).offset().top);
$(this).find('.dropdown-menu').css('left',$(this).offset().left);
});
Optionaly add this to hide dropdown on window resize:
$( window ).resize(function() {
$('.somecontainer .dropdown-menu').parent().removeClass('open');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
