Bootstrap: en un diálogo modal, ¿cómo hago que el menú desplegable se expanda fuera del cuadro de diálogo?

Question

código Ejemplo:

http://jsfiddle.net/vpg5g/

me gustaría tener el menú que se despliega desde el botón de ampliar las fronteras de la modales. Como puede ver, el estado actual no se puede usar. ¿Hay alguna forma de lograr esto?

Answer 1

El modal no permite que ningún desbordamiento, lo puede solucionar mediante el uso de:

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

Working demo

Es posible que desee agregar una clase a aplicar dichas normas sólo para los modales que realmente lo necesitan, en caso de que esta solución crea errores.

Answer 2

Si no puede quitar el overflow: auto Usted puede hacer algo como esto

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