CODEWITHSUNDEEP
javascriptjquery
luqui
luqui

Reputation: 60503

How to refresh the size of a div after adding elements to it

I have an element like this:

<div id="content" style="border: 2px solid black">
</div>

And through JQuery I add some new stuff:

$("#content").append($('<div></div>').addClass("box"));

where

.box { margin: 10px; padding: 10px; border: 1px solid black }

But the outer div does not resize when I do this, so I get an inner box that is sticking out of a solid outer box. How can I get the outer box to resize itself when I add this inner box?

Upvotes: 2

Views: 10702

Answers (4)

Vladislav
Vladislav

Reputation: 1

In my case I added:

#property { overflow: auto; }

and now size of elements is being recalculated when I show or hide elements.

Upvotes: 0

Mouhannad
Mouhannad

Reputation: 2209

try this:

js

$('#content').append('<div class="box">&nbsp;</div>');

html

<div id="content" style="border:2px solid black;overflow:hidden;">
</div>

I hope his help!

Upvotes: 1

Peter Ajtai
Peter Ajtai

Reputation: 57705

#content is not resizing, since it's width is probably set in your CSS.

Either make it wider, or specifically size it appropriately.

Looks like #content must be over 40px wide, since the inner div has 10 margin and 10 padding, which is 20 on the left and 20 on the right.

So, something like:

$("#content").css("width","100%").append($('<div></div>').addClass("box"));

Or better yet, set up your CSS at the right width to begin with:

#content { width: ... ; }

If you are floating .box within #content then set the overflow of #content to auto(or hidden), otherwise the outer box doesn't "see" the floating inner boxes:

#content { overflow: auto; }

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100371

Correct the selector if it's not a typo

$("#content") // id="content" (correct)
$("content")  // tagName = content

And change the display of the div to inline-block

#content {
    display: inline-block;
}

Then the div will not occupy the whole row.

Upvotes: 3

Related Questions