I have a dropdown menu using twitter-bootstrap 3 and it's inside a <li class="media"> , so every <li> has a dropdown with some actions, it happens that when the height of the <li> is less than the height of the menu it does not show all the options does anyone know how to solve?
Example in jsfiddle
Hello.
I made some tests here.
You should add the <li style='overflow:visible;' option, it will look like this: <li class="media" style="overflow:visible;border-bottom: solid 1px; margin-bottom: 2px; padding-bottom: 2px; " id="comment_71"> .
In <div class="media-body"> , change to <div class="panel-body"> that will work.
Vlw
The problem is that <li class="media"> is with overflow:hidden; , I added style='overflow:visible;' and the dropdown appeared.
I do not know anything about bootstrap, but I was very interested ...
The path seems to be around here:
CSS:
.dropdown-menu{
position:fixed;
}
jquery:
$('.dropdown-toggle').click(function (){
dropDownFixPosition($(this),$(this).next('.dropdown-menu'));
});
function dropDownFixPosition(button,dropdown){
var dropDownTop = button.offset().top + button.outerHeight();
dropdown.css('top', dropDownTop + "px");
dropdown.css('left', button.offset().left + "px");
}
jsfiddle: link
source: link
Check for possible incompatibilities in different browsers:
IE 11:
Firefox:
z-index did not work?
<ul class="dropdown-menu" style="z-index:99999">
<li><a href="#">Ação 1</a></li>
<li><a href="#">Ação 2</a></li>
<li class="divider"></li>
<li><a href="#">Ação 3</a></li>
<li><a href="#">Ação 4</a></li>
<li><a href="#">Ação 5</a></li>
</ul>
or
<style>
li { z-index:-1; }
</style>