5
I have a dropdown menu using twitter-bootstrap 3 and it is inside a <li class="media">, then each <li> has a dropdown with some actions, it happens when as the height of the <li> is less than the height of the menu it does not show all options someone knows how to solve?
Example in jsfiddle
2
The problem is that the <li class="media"> is with overflow:hidden;, added style='overflow:visible;' and the dropdown appeared.
Was the same thing.
put and worked, see: http://jsfiddle.net/cx6qa617/9/
@Daniellemes is in the elementro <li> and not in the <div>, corrected.
I found it strange because your solution worked online and here it didn’t work, was when I saw the reply from @Gilvan Andre I realized that you took the class from the first div and so it worked.
2
Hello.
I ran some tests here.
You must add the option <li style='overflow:visible;', will look like this: <li class="media" style="overflow:visible;border-bottom: solid 1px; margin-bottom: 2px; padding-bottom: 2px; " id="comment_71">.
In the <div class="media-body">, swap for <div class="panel-body"> that will work.
Vlw
That’s right, thank you.
Right, always the orders! Hugs
1
I don’t know anything about bootstrap, but I’m very interested...
The path seems to be this way:
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: http://jsfiddle.net/jaderw/cx6qa617/3/
source: https://github.com/twbs/bootstrap/issues/7160
Check for possible incompatibilities on different browsers:
IE 11:
Firefox:
0
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>
It didn’t work, I tried both ways
Browser other questions tagged css twitter-bootstrap
You are not signed in. Login or sign up in order to post.
One thing to try to help: in the "here goes normal" you just put the set ul.dropdown-menu?
– Blau
you say change places?
– Daniel Lemes
No, I asked what change you make and it works.
– Blau
No, there’s a system comment... nothing to do with the problem, I’ll even edit the code
– Daniel Lemes