Bootstrap drop down cutting off

Question

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

Answer 1

Write like this:

.media,
.media-body {
  overflow: visible;
}

.media:after,
.media-body:after{
 content:'';
 clear:both;
 display:block;
}

May be that's help you.

Answer 2

NEW METHOD:

Just bring drop down menu out of media class and use a negative margin:

 <div class="dropdown pull-right" style="margin-left:-30px">
     ...
 </div>

 <div class="media">
     ...
 </div>

Answer 3

Get this quite often on projects I inherit; tends to be a case of one of the parent elements having

overflow:hidden

Once I remove this it seems to work as expected (as long as your design doesn't rely on this property).

Answer 4

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.

Answer 5

I had the same problem. After adding this lines, my dropdown worked just as I expected:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

I found the solution here

Answer 6

Check whether media class is has overflow:hidden. If so, replace it with overflow: auto or overflow: visible.