Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts

    Exclamation Why doesnt my div expand with new information

    I have two div's, they are both associated with a drag and drop feature with JS, the problem i am running into is that when i drag and drop a new block into the div it refuses to expand, and when i tag the height with inherit, it just enlarges to god knows what size. Here is my code, i have looked through the JS and have found in no way it affecting the css...

    Code:
    body{
    		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
    		background-color:#E2EBED;
    	}
    	#footer{
    		height:30px;
    		vertical-align:middle;
    		text-align:right;
    		clear:both;
    		padding-right:3px;
    		background-color:#317082;
    		margin-top:2px;
    		width:790px;
    	}
    	#footer form{
    		margin:0px;
    		margin-top:2px;
    	}
    	#dragDropContainer{	/* Main container for this script */
    		width:790px;
    		height:inherit;
    		border:1px solid #317082;
    		background-color:#FFF;
    		-moz-user-select:none;
    	}
    	#dragDropContainer ul{	/* General rules for all <ul> */
    		margin-top:0px;
    		margin-left:0px;
    		margin-bottom:0px;
    		padding:2px;
    	}
    	
    	#dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
    		list-style-type:none;
    		width:99px;
    		height:76px;
    		background-color:#EEE;
    		border:1px solid #000;
    		padding:2px;
    		margin-bottom:2px;
    		cursor:move;
    		font-size:0.9em;
    	}
    	
    	li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
    		border:1px dotted #600;	
    		background-color:#FFF;
    	}
    
    	
    	/* LEFT COLUMN CSS */
    	div#listOfItems{	/* Left column "Page Pictures" */
    		float:left;
    		padding-left:10px;
    		padding-right:10px;
    		
    		/* CSS HACK */
    		width: 180px;	/* IE 5.x */
    		width/* */:/**/160px;	/* Other browsers */
    		width: /**/160px;
    				
    	}
    	#listOfItems ul{	/* Left(Sources) column <ul> */
    		height:560px;	
    
    	}
    		
    	div#listOfItems div{
    		border:1px solid #999;		
    	}
    	div#listOfItems div ul{	/* Left column <ul> */
    		margin:0 auto;	/* Space at the left of list - the arrow will be positioned there */
    	}
    	#listOfItems div p{	/* Heading above left column */
    		margin:0px;	
    		font-weight:bold;
    		padding-left:12px;
    		background-color:#317082;	
    		color:#FFF;
    		margin-bottom:5px;
    	}
    	/* END LEFT COLUMN CSS */
    	
    	#dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
    		background-color:#E2EBED;
    		border:1px solid #317082;
    	}
    	
    	/* Start main container CSS */
    	
    	div#mainContainer{	/* Right column DIV */
    		width:500px;
    		float:right;
    		height:inherit;	
    	}
    	#mainContainer div{	/* Parent <div> of small boxes */
    		height:auto;
    		margin-right:10px;
    		margin-bottom:10px;
    		margin-top:0px;
    		border:1px solid #999;
    
    		/* CSS HACK */
    		width: 172px;	/* IE 5.x */
    		width/* */:/**/170px;	/* Other browsers */
    		width: /**/170px;
    				
    	}
    	#mainContainer div ul{
    		padding:1px;
    		margin:0 auto;
    	}
    	
    	#mainContainer div p{	/* Heading above small boxes */
    		margin:0px;
    		padding:0px;
    		padding-left:12px;
    		font-weight:bold;
    		background-color:#317082;	
    		color:#FFF;	
    		margin-bottom:5px;
    	}
    	
    	#mainContainer ul{	/* Small box in right column ,i.e <ul> */
    		width:152px;
    		height:80px;	
    		border:0px;	
    		margin-bottom:0px;
    		overflow:hidden;
    		
    	}
    	
    	#dragContent{	/* Drag container */
    		position:absolute;
    		width:150px;
    		height:20px;
    		display:none;
    		margin:0px;
    		padding:0px;
    		z-index:2000;
    	}
    
    	#dragDropIndicator{	/* DIV for the small arrow */
    		position:absolute;
    		width:7px;
    		height:10px;
    		display:none;
    		z-index:1000;
    		margin:0px;
    		padding:0px;
    	}
    	</style>
    ListOfItems and MainContainer are the two divs that i am trying to expand and fill once populated. If anyone can help i would greatly appreciate it... thanks in advance

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hard to tell without the JS, but I worked on a similar issue where the container wouldn't expand vertically because of the dynamically generated content. I ended up recoding the JS to calculate the new height of the box based on the height of the new content.

    Later I got rid of the problem by nesting the container in another container not affected by floats.

    If you have a link to a test page this one would be a lot easier.
    Last edited by rmedek; 01-05-2008 at 04:54 PM.

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    thanks rmedek, the unfortunate things is that i am working on an internal intranet so its pswd protected, but i never thought that maybe the JS could contain the div, i will just create a function to do so.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    So why not post the info to the web? Or just show us the code?


  •  

    Posting Permissions

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