Я хотел бы, чтобы меню, которое выпало из кнопки, расширялось по модальным границам. Как вы видите, текущее состояние непригодно. Есть ли способ достичь этого?
Ответ 1
Модаль не допускает переполнения, вы можете исправить его, используя:
Возможно, вы захотите добавить класс, чтобы применять эти правила только к модальностям, которые действительно нуждаются в этом, если это исправление создает ошибки.
Ответ 2
Если вы не можете удалить переполнение: auto
Вы можете сделать что-то вроде этого
$('.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();
});