div doesnt grow with dynamic content

Question

I have a outer div called content and a input button.

on the button click I dynamically created a div and append it to the content div.

The new div is draggable.

If I drag the div the content div grows perfectly, but if I keep clicking the 'add div' button the content does not grow to include the inner div's.

also How can I make it so the content will shrink if I move the div up?

heres a jsfiddle http://jsfiddle.net/F4bxA/14/

code to match fiddle

#content {
display: block;
position:relative;
top:215px;
width:600px;
margin:auto;
height:auto;
border:1px solid red;
padding:0px;
min-height:300px;
}

#button {
position:absolute;
top:10px;
left:25px;
}

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
p = p + 75;
i++;
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'draggable' + i);
newdiv.style.position = "absolute";
newdiv.style.top = +p + "px";
newdiv.style.left = "20px";
newdiv.style.border = '1px solid #000';
newdiv.style.display = 'inline-block';
newdiv.style.width = '75px';
newdiv.style.height = '75px';
newdiv.innerHTML = "draggable inner div";
document.getElementById("content").appendChild(newdiv);

var g = $('#draggable' + i);
var o = $('#content');
g.draggable({
    constraint: "#content",
    drag: function (event, ui) {
        if (g.position().top > o.height() - g.height()) {
            o.height(o.height() + 5);
            return true;
        }           
    },

    scroll: false
});

});

 <div id="content"></div>
 <form>
     <input type='button' name='button' id='button' value='add a div'>
  </form>

on a side note you should add destroy() to remove the clone's place so when you click add div it doesn't go to the bottom — Patsy Issa, Aug 05 '13 at 13:03
no i dont want to destroy the clone, I am using it as an example of adding dynamically created divs at different positions on the page — Barry Watts, Aug 05 '13 at 13:05
Possibly duplicate post of [this](http://stackoverflow.com/questions/12457547/parent-div-does-not-adjust-height-when-adding-div-dynamically). — Deepak Biswal, Aug 05 '13 at 13:14
no that is a different problem to do with width and the answer was adding scroll bars to the content div. I need the content div to grow and shrink depeneding on the inner divs positions — Barry Watts, Aug 05 '13 at 13:17

score 1 · Accepted Answer · answered Aug 05 '13 at 13:36

1

Try this

http://jsfiddle.net/F4bxA/32/

You just have to update the height

$("#content").height(o.height()+g.height());

answered Aug 05 '13 at 13:36

Igor Costa

184
1
8

score 0 · Answer 2 · answered Aug 05 '13 at 13:09

 $('input[type=button]').click(function () {
    p = p + 75;
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'draggable' + i);
    newdiv.style.position = "absolute";
    newdiv.style.top = +p + "px";
    newdiv.style.left = "20px";
    newdiv.style.border = '1px solid #000';
    newdiv.style.display = 'inline-block';
    newdiv.style.width = '75px';
    newdiv.style.height = '75px';
    newdiv.innerHTML = "draggable inner div";
    document.getElementById("content").appendChild(newdiv);

    var g = $('#draggable' + i);
    var o = $('#content');

    o.height(o.height() + 30);  //new code


      g.draggable({
        constraint: "#content",
        drag: function (event, ui) {
        if (g.position().top > o.height() - g.height()) {
            o.height(o.height() + 5);
            return true;
        }           
    },

    scroll: false
  });

  });

this would only work if the div added was 30px in height and was adding directly below the other div. If each div was different and added randomly on the page this will not work. Also if you click the button 5-6 times the divs land outside the content — Barry Watts, Aug 05 '13 at 13:14

score 0 · Answer 3 · answered Aug 05 '13 at 13:29

If you float the container and the nodes that you are appending, as the content exceeds the height of the container, it will expand.

Also, I've pulled the styles you set via javascript out of the javascript and put them into the css.

CSS:

#content {
    display: block;
    position:relative;
    top:215px;
    width:600px;
    margin:auto;
    height:auto;
    border:1px solid red;
    padding:0px;
    min-height:300px;
    float:left;  /* floating the container */
}

#button {
    position:absolute;
    top:10px;
    left:25px;
}

/* moving js styles */
.draggable {
    float:left;
    clear: both;
    border: 1px solid #000;
    display: inline-block;
    width: 75px;
    left:20px;
    height: 75px;
}

JS:

var i = 1;
var p = 50;
$('input[type=button]').click(function () {
    p = p + 75;
    i++;
    var newdiv = document.createElement('div');
    newdiv.setAttribute('class','draggable');
    newdiv.setAttribute('id', 'draggable' + i);
    newdiv.innerHTML = "draggable inner div";
    document.getElementById("content").appendChild(newdiv);

    var g = $('#draggable' + i);
    var o = $('#content');
    g.draggable({
        constraint: "#content",
        drag: function (event, ui) {
            if (g.position().top > o.height() - g.height()) {
                o.height(o.height() + 5);
                return true;
            }           
        },

        scroll: false
    });

});

JS Fiddle: http://jsfiddle.net/F4bxA/28/

score 0 · Answer 4 · answered Aug 05 '13 at 14:09

Just add a function to calculate the inner divs position, then ajust the content's height. (Maybe there has a pure css way I don't know.)

var container = $("#content");
function setHeight() {
    var maxHeight = 0;
    $("div", container).each(function(i, v) {
        maxHeight = Math.max($(v).position().top + $(v).height(), maxHeight);
    });
    if (container.height() != maxHeight) {
        container.height(maxHeight);
    }
}

Here is the fiddle.

score 0 · Answer 5 · answered Aug 05 '13 at 14:41

From your jsfiddle http://jsfiddle.net/F4bxA/14/

I suggest you create new div for parent of div draggable and add css float:left to div content and div draggable. Two div will position freely not depend on each other.

<div id="content"></div>
<div id='subcontent'></div>

#content {
    float:left;
}

newdiv.style.float = 'left';
document.getElementById("subcontent").appendChild(newdiv);

I modify some code like in

JS Fiddle: http://jsfiddle.net/F4bxA/38/

In this code when you move div draggable close to top of comment, div content will plus height and move top -1px(same top position).

div doesnt grow with dynamic content

5 Answers5