Dynamically alter outter div as inner one gets bigger.

Question

I have two divs, one inside another. The outter one is called #wrapper, while the inner one is called #pad.

Now #pad allows user input, and I have a javascript (jQuery) function that changes the content of #pad based on what the user input is. Sometimes, because of this function, #pad's content will cause the div to become more elongated than before. Now obviously I would wish for #wrapper to grow longer as well to accommodate this change in #pad's length. However, this does not occur.

#wrapper
{
    clear:both;
    padding-top:0.5em;
    /*padding-left:50px;*/
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
}

#pad
{
    margin-top: 25px;
    -moz-border-radius: 5px;
    border: solid 1px #DDD;
    margin-left:25px;
    padding-left:25px;
    margin-right:25px;
    padding-right:25px;
    margin-bottom:2em;
}

This is the javascript function:

function preview()
{
    var id1=$("#input1").val();
    var id2=$("#input2").val();
    var id3=$("#input3").val();
    var id4=$("#input4").val();
    var id5=$("#input5").val();

    if(id1!= null && id1!="")
    {
        if( $("#preview1").attr("src")!=id1)
        {
            $("#preview1").attr("src",id1);
            $("#preview1").fadeIn("slow");
        }
    }
    else
    {
        $("#preview1").attr("src","");
        $("#preview1").fadeOut("slow");
    }

    if(id2!= null && id2!="")
    {
        if( $("#preview2").attr("src")!=id2)
        {
            $("#preview2").attr("src",id2);
            $("#preview2").fadeIn("slow");
        }
    }
    else
    {
        $("#preview2").attr("src","");
        $("#preview2").fadeOut("slow");
    }

    if(id3!= null && id3!="")
    {
        if( $("#preview3").attr("src")!=id3)
        {
            $("#preview3").attr("src",id3);
            $("#preview3").fadeIn("slow");
        }
    }
    else
    {
        $("#preview3").attr("src","");
        $("#preview3").fadeOut("slow");
    }
    if(id4!= null && id4!="")
    {
        if( $("#preview4").attr("src")!=id4)
        {
            $("#preview4").attr("src",id4);
            $("#preview4").fadeIn("slow");
        }
    }
    else
    {
        $("#preview4").attr("src","");
        $("#preview4").fadeOut("slow");
    }
    if(id5!= null && id5!="")
    {
        if( $("#preview5").attr("src")!=id5)
        {
            $("#preview5").attr("src",id5);
            $("#preview5").fadeIn("slow");
        }
    }
    else
    {
        $("#preview5").attr("src","");
        $("#preview5").fadeOut("slow");
    }
    setTimeout("preview()",1000);
    $("#wrapper").attr("height",$(document).attr("height"));
}

http://surveys.mylifeisberkeley.com/

Answer 1

As far as I can tell, get rid of the #wrapper height:100%, adjust margins and padding to make things fit, and it should work. I guess the problem is mostly that you mix up the element attribute height, and the CSS attribute height. In any case, all this should be possible to do simply using normal HTML flow instead of altering the height manually.

By the way "more elongated" is a quite strange wording, I presume that you mean to say is "higher".