...

View Full Version : Why doesnt my div expand with new information



jcdevelopment
01-04-2008, 03:42 PM
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...




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

rmedek
01-04-2008, 05:59 PM
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.

jcdevelopment
01-04-2008, 06:44 PM
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.

Apostropartheid
01-05-2008, 04:23 PM
So why not post the info to the web? Or just show us the code?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum