Создание Bootstrap modal resizable с jQuery UI issue

Question

Итак, у меня есть мода Bootstrap, которую я создал, и я пытаюсь изменить его с помощью jquery. У меня размер изменяется горизонтально, но если вы попытаетесь изменить размер по вертикали, то, как и содержимое внутри модального, не содержится внутри элемента, который я пытаюсь изменить.

Я пробовал использовать свойство 'alsoResize' на .resizable() и включал все div в пределах модального, но, похоже, вызывает другие проблемы.

$('.modal-content').resizable({ 
    alsoResize: ".modal-header, .modal-body, .modal-footer" 
}); 

Вот мой пример: https://jsfiddle.net/p7o2mkg4/

Answer 1

Вы на самом деле все сделали правильно! Но поведение по умолчанию для элементов HTML overflow: visible. Поэтому, если содержимое родительского элемента переполняется, они выходят из модального, и это выглядит не очень хорошо! Итак, вам нужно установить свойство CSS overflow на scroll или hidden, чтобы исправить разрыв на небольшом размере. Попробуйте добавить:

.modal-content.ui-resizable { 
    overflow: scroll; 
} 

Это обеспечит прокрутку при переполнении элемента.

Ссылка на JSFiddle:https://jsfiddle.net/p7o2mkg4/1/

Answer 2

Это работает (CSS)

#myModal>div{ 
overflow-y: hidden; 
overflow-x: hidden; 
}