Containment Height

JavaScript
1

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,

2

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.

3

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>
4

.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!

5

Thank you so much!

Works perfectly now.

And in every Browser too :slight_smile:

You are a genuis!

Have a great day :slight_smile: