DIV not expanding when dynamic content is added with jQuery

Question

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);
jQuery('#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?

Answer 1

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;
}

Answer 2

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.