CODEWITHSUNDEEP
htmltwitter-bootstrap
flyx
flyx

Reputation: 39708

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

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?

Upvotes: 31

Views: 33265

Answers (2)

ppollono
ppollono

Reputation: 3642

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

Upvotes: 5

Sherbrow
Sherbrow

Reputation: 17379

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.

Upvotes: 37

Related Questions