SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Containment Height

    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. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I thought.

    Perhaps my CSS code is wrong?

    Code:
    	
    <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>
    Code:
    <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>


    Code:
    <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. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    .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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!

    Works perfectly now.

    And in every Browser too

    You are a genuis!

    Have a great day


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •