I am trying to add a dropdown setting menu to my comments section in a project that I've been working on.
The dropdown menu seems to cut itself off and I am not sure why is that the case.
I tried overflow:visible and z-index:999
. but none of them seem to work.
This is a basic comment block that I am trying to include a dropdown in
This is the basic code that I am trying to Implement
<div class="media">
<a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a>
<div class="dropdown pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;">
<b data-icon=""></b> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
<div class="media-body">
<h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4>
<p>
Main body of the comment
</p>
</div>
</div>
And this is how my dropdown menu is turning out to be
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
.media-list {
margin-left: 0;
list-style: none;
}
To override it, use . dropdown-menu-left.
The drop-down is used to create a list of items that need to select an element. We use <select> and <option> elements to create a drop-down list and use disabled attribute in <select> element to disable the drop-down list element.
You can hide the dropdown arrow from the Dropdown Menu by adding class e-caret-hide to Dropdown Menu element using the CssClass property.
You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.
This is not an ideal solution as the menu will not scroll with the target element, but I'm doing this for a scrolling data table as a last resort until I can find an alternative:
(function() {
var dropdownMenu;
$(window).on('show.bs.dropdown', function(e) {
dropdownMenu = $(e.target).find('.dropdown-menu');
$('body').append(dropdownMenu.detach());
dropdownMenu.css('display', 'block');
dropdownMenu.position({
'my': 'right top',
'at': 'right bottom',
'of': $(e.relatedTarget)
})
});
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
This will append the menu to the body and clean it up on hide. I'm using jquery UI for positioning but you can replace it with regular jquery positioning if you don't want to add the heavy dependency. You may also want to alter $(window).on
if you only want to do this to a limited selection of dropdowns.
Check whether media class is has overflow:hidden
. If so, replace it with overflow: auto
or overflow: visible
.
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