HTML dynamic element generation

Question

I have a div tag which has some background color, that adds good look to my page. The div tag contains a button which when clicked generates two textboxes. Everything is working properly but the background is not expanding as and when new elements are added dynamically. I used height:auto in the div tag styling. How do i achieve background expansion as and when content gets added to the page dynamically?

did u try height:100% ? Also if possible , put up some code or a working demo at jsfiddle.net — Clyde Lobo
– Clyde Lobo, Commented Mar 3, 2011 at 8:20
I think that this is not enough information to write a proper answer. Maybe you can paste some code to pastebin, so we can examine it. — Adam Arold
– Adam Arold, Commented Mar 3, 2011 at 8:26
can you post your code on jsfiddle.com or something? There are many things that might be wrong here. What's your overflow set to? Are you floating any of your divs? Do you give them explicit width. It should be too difficult to solve this — stephenmurdoch
– stephenmurdoch, Commented Mar 3, 2011 at 8:28
Here's a jsfiddle that proves that the simple case as described does not reproduce the problem. jsfiddle.net/sqf8w/2 OP needs to create a fiddle that reproduces the problem. — Ruan Mendes
– Ruan Mendes, Commented Mar 3, 2011 at 8:41

Martin Jespersen · Accepted Answer · 2011-03-03 08:28:53Z

1

Assuming that you are not using absolute positioning on your child elements, all you have to do is set overflow:hidden on the parent, this will ensure that the parent expands around all the children inside.

answered Mar 3, 2011 at 8:28

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ruan Mendes Over a year ago

Interesting... I don't follow why overflow:hidden would cause the background color to stay in sync with a growing div. jsfiddle.net/sqf8w/1 doesn't require anything special to make the div grow. Were you able to reproduce the problem?

Martin Jespersen Over a year ago

@juan: when you tell the parent to hide every thing that overflows, and at the same time doesn't tell the parent to have an exact size, the parent is forced to make sure nothing overflows, and thus it expands to accommodate all children.

nikhil Over a year ago

setting overflow:hidden solved my problem.I am posting my code in jsfiddle.net/nikhilneela/cTPSa, Please tell me whether the way i have done styling is proper or not. I want to refine my code

Ruan Mendes Over a year ago

@nikhil, I don't see the problem, what is the button we should click to get text boxes to show up? @Martin: The jsfiddle that I posted shows that setting overflow:hidden is not required, at least for a simple example. Do you know in which cases overflow: hidden fixes a problem?

nikhil Over a year ago

@Juan Mendes: Must click add to dynamically generate text boxes

|

Collectives™ on Stack Overflow

HTML dynamic element generation

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related