使用jQuery UI问题使Bootstrap模式可调整大小

Question

所以我有一个我创建的Bootstrap模式,我试图使用jquery使其可调整大小.我有调整大小水平工作,但如果你尝试垂直调整大小,就像模态内的内容不包含在我试图调整大小的元素中.

我尝试使用'alsoResize'属性.resizable()并包含模态中的所有div,但这似乎会导致其他问题.

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

这是我的例子:https://jsfiddle.net/p7o2mkg4/

Answer 1

你真的做对了!但overflowHTML元素的默认行为是visible.因此,如果父元素的内容溢出,它们会突破模态并且看起来不太好!因此,您需要将CSS overflow属性设置为scroll或hidden修复小尺寸的破坏.尝试添加:

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

这将确保在元素溢出时滚动.

链接到JSFiddle: https ://jsfiddle.net/p7o2mkg4/1/