DIV not expanding when dynamic content is added with jQuery

I have a div with the following CSS:

#feedback {
  min-height: 24px;
  line-height: 24px;
  margin-bottom: 10px;
  display: none;
}

Then I add some content using jQuery.

jQuery('.feedback_text').html(feedback.message);
jQuery('.feedback_icon').addClass(feedback.type);
j开发者_如何学编程Query('#feedback').fadeIn('normal', function() {
  jQuery(this).height('100%');
});

The problem is that when I have more than one line of text, the DIV does not expand.

I've tried using $('.feedback_text').height(), but it only gives me the height specified in the CSS (24px) and not the height after dynamic content was added.

Any suggestions anyone?

---

There shouldn't be any need to set the height explicitly. Here's an example on jsFiddle I just made, where you can see your code running and successfully showing a <div> expanded to fit the contents that are set.

Is there perhaps some other CSS rule affecting your div? What does it look like if you inspect it with a CSS debugger?

UPDATE: Thank you for providing fuller code. I see from this that your problem is that your container <div> only contains floated elements. Floated elements are taken out of the normal document flow, and don't affect the height of their container like they normally would. (And also because you've set an explicit height on your .feedback_text element, which I'm guessing you didn't mean to do.)

The traditional hack/fix for this is to add a final contained element (which can be empty) below the floated elements, set to clear the floats. That forces the containing element to stretch to fit the floated elements. So, you go from this:

...
#feedback span { float: left }
...
<div id="feedback">
    <span class="feedback_icon"></span>
    <span class="feedback_text"></span>
</div>

to this:

...
#feedback span { float: left }
.clearfix { clear: both }
...
<div id="feedback">
    <span class="feedback_icon"></span>
    <span class="feedback_text"></span>
    <div class="clearfix"></div>
</div>

..and everything should start working. I've updated your example to use this technique in this jsFiddle.

By the looks of what you want to achieve, though, I'm not sure you need to float both elements anyway. Floating the image left and leaving the text non-floating, together with a few other adjustments, lets you get the effect you want but without the clearfix hack. Here's my final example (note I've fiddled with your images, etc., to get a working example.)

UPDATE: I just came back to this answer after an upvote, and I feel I should share the more modern solution to expanding block elements to contain their floats, which is to add a simple overflow: hidden; to the container. This trick works in all modern browsers, though some may also require a set width, and is probably the simplest way of expanding the div to contain the floats in this question.

I've updated my example jsFiddle to show this working. All it needed was the overflow property on the feedback div for it to work for all my browsers. According to that article, you might need to set an explicit height or width (e.g. width: 100%;) for some versions of Opera or IE, but I'd recommend you give it a blast without it and see if it works in the browswers you're targeting before bothering with that.

#feedback {
  overflow: hidden;
  min-height: 24px;
  line-height: 24px;
  margin-bottom: 10px;
  display: none;
}

---

this in the callback function does not refer to jQuery('#feedback') object. Try to cache it before using.

use this:

var feedBackDiv = $('#feedback');
feedBackDiv.fadeIn('normal', function(){
    feedBackDiv.css({'height':'100%'});
});

Also consider that div element is a block box, meaning that gets all the available horizontal space of parent, and wrapping the content vertically (stretching vertically to provide space for child elements). So, unless you haven't encountered the great collapse, you don't need to specify a height for it.

---

I found the solution.

As it turned out, the feedback_text element was a span element. Changing this to a div and adding the following style display: inline-block solved my problem.

Thanks for helping me along the right path :)

---

Have you tried without explicitly specifying height? DIVs usually auto size to hold the entire content unless the content is floated or absolutely positioned.

---

I think the problem may be related to the display property set to none.

Try to use another method to hide the element, for example you could set its height to 0 in the css, and then set it back to auto later when the content has been added.

Or, if you don't care about the size of the element you could use visibility:hidden instead of display:none.