I’m using the Sortable/Portlets UI Code.
Is it possible to auto-resize the Containment Height’s. Bascially I have a DIV that acts as a container with a black background, when I sort these elements I want the container DIV height to change to match.
OR is it possible to stop the bottom sortables from having sortables placed underneath them?
Thanks,
I am unfamiliar with portlets UI code, never heard of it.
However if a div really is a container for other things, normally it would auto-expand its height to contain its children. Unless the children are floats and the containing div hasn’t contained them, or if someone set a static height on the div.
So, this might not be a JS issue depending on what your code is.
That’s what I thought.
Perhaps my CSS code is wrong?
<style type="text/css">
.demo { width:950px; min-height: 750px; height:auto !important; height: 750px; /* IE6 */ background-color:#3e0000; }
.column { width: 305px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; background-color:#7c0000; color:#FFFFFF; height: 230px; }
.portlet-header { float:left; padding-bottom: 4px; padding-left: 0.2em; background-color:#b21f24; height:35px; width: 286px; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 230px !important; background-color: #FFFFFF; }
.ui-sortable-placeholder * { visibility: hidden; }
.handle {float:right; width:40px; height:32px; margin:0; padding: 0; }
</style>
<div class="demo">
<div class="column" id="col0">
<div class="portlet" id="p_0">
<div class="portlet-header">Feeds <img src="arrow.png" alt="move" width="40" height="32" class="handle" /></div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div></div>
<script type="text/javascript">
$(function()
{
// check for order cookies
for (var i = 0; i < 3; i++)
{
var ckie = $.cookie("col" + i);
if (ckie && ckie != '')
{
var list = ckie.split(',');
for (var x = 0; x < list.length; x++)
{
$('#'+list[x]).appendTo('#col' + i);
}
}
}
$(".column").sortable({
connectWith: '.column',
handle: '.handle',
containment: '.demo', scroll: false
});
$(".portlet").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-plusthick"></span>')
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function()
{
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").bind('sortupdate', function()
{
var i = 0;
$('.column').each(function()
{
$.cookie("col" + (i++), $(this).sortable('toArray'), { expires: 365 });
});
});
});
</script>
.demo { width:950px; min-height: 750px; height:auto !important; height: 750px; /* IE6 */ background-color:#3e0000; }
Hm, I’ll show you how I do it, mostly because I try to avoid !important:
.demo {
min-height: 750px; /all modern browsers/
}
- html .demo {
height: 750px; /ie6/
}
But, yours is ok. What’s happening is, the children are floated. .demo can’t see them because it’s a static box who isn’t required to deal with overflow.
Read Gary’s Enclosing Floats (which is something a bit different than clearing floats).
With the min-height in there for modern browsers, you could likely get away with simply adding “overflow: hidden” to .demo. This requires .demo to “see” its floated children in order to deal with the overflow, and so it’ll enclose them like you were expecting.
IE6 and 7 don’t work that way, BUT they have another bug: if Haslayout is set on a box, it’ll enclose its floated children in IE. “overflow” triggers Haslayout in IE7 (as does min-height)… and the height statement for IE6 triggers Haslayout for that browser.
You should be all set!