如何在调整大小时更新包装内容div?
问题描述:
我正在使用jQuery Ui创建一个具有拖动和调整大小的网格,元素具有不同类型的内容,文本和图像。当我调整元素的高度时,它不更新内容高度,例如。例如,不重新计算新的图像高度。如何在调整大小时更新包装内容div?
HTML
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content"><img src="https://s-media-cache-ak0.pinimg.com/736x/12/64/da/1264da4a3f18207dc22592102abae40d--frangipani-tattoo-plumeria-flowers.jpg"></div>
</div>
</div>
JS
$(function() {
$(".column").sortable({
connectWith: ".column",
placeholder: 'ui-state-highlight',
forcePlaceholderSize: true
});
$(".portlet").resize(function() {
var myHeight = $(".portlet-content").scrollHeight;
$(".portlet").outerHeight(myHeight);
});
$(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
});
JsFiddle here尝试用图片大小的框,你会看到它并没有更新其包装高度
答
OK的样子我已经解决它说:
$(".portlet").resize(function() {
$(".portlet").css("height", "auto");
});
并在CSS提供:
.portlet-content {
padding: 5px;
height: 100%;
float: left;
}
工作jsFiddle
不知道这是否是最好的方法,但工程
似乎运作良好。您可能还想将'overflow:hidden;'添加到'.portlet'类来修复不包含文本的行。 – ivo