Bootstrap: In a modal dialog, how do I make the dr

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?

回答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.

回答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();
    });