Bootstrap: In a modal dialog, how do I make the dropdown menu expand outside the dialog?

Question

Example code:

http://jsfiddle.net/vpg5g/

I'd like to have the menu that drops down from the button expand over the modal's borders. As you see, the current state is unusable. Is there some way to achieve this?

Answer 1

The modal does not allow any overflowing, you can fix it by using :

.modal { overflow: visible; } .modal-body { overflow-y: visible; } 

Working demo

You may want to add a class to apply those rules only to modals that really need it, in case this fix creates bugs.

Answer 2

If you cannot remove the overflow: auto You can do something like this

    $('.drop-down-inside-modal').on('click' , '.dropdown-toggle', function(event){         var self = $(this);         var selfHeight = $(this).parent().height();         var selfWidth = $(this).parent().width();         var selfOffset = $(self).offset();         var selfOffsetRigth = $(document).width() - selfOffset.left - selfWidth;         var dropDown = self.parent().find('ul');         $(dropDown).css({position:'fixed', top: selfOffset.top + selfHeight , left: 'auto', right: selfOffsetRigth ,  width: '160px'});     });      function fixDropdownPosition(){         var openDropdownButton = $('.drop-down-inside-modal.open');         if($(openDropdownButton).length){             var selfHeight = $(openDropdownButton).height();             var selfWidth = $(openDropdownButton).width();             var openDropdownButtonOffset = $(openDropdownButton).offset();             var openDropdownButtonOffsetRigth = $(document).width() - openDropdownButtonOffset.left - selfWidth;             var openDropdown = $(openDropdownButton).find('ul');             $(openDropdown).css({position:'fixed', top: openDropdownButtonOffset.top + selfHeight , left: 'auto' , right: openDropdownButtonOffsetRigth, width: '160px'});         };     };      $(".modal-body").unbind("scroll");     $(".modal-body").scroll(function(){         fixDropdownPosition();     });      $( window ).resize(function() {         fixDropdownPosition();     });