calbar calbar - 1 month ago 17
jQuery Question

Why does my Bootstrap row containing Snook's Simple jQuery Slideshow have a height of 0?

I'm implementing Snook's Simple jQuery Slideshow on my Bootstrap 3 website.

Check it out here: https://snook.ca/archives/javascript/more-simple-slideshow

For some reason, the row containing the slideshow has a height of 0, so all the following text is appearing on top of my slideshow images.

Here's my code:

<div class="row bottom-margin">
<div class="slideshow">
<img class="img-responsive" src="Splash1.jpg">
<img class="img-responsive" src="Splash2.jpg">
</div>
</div>

...

<script>
$(function(){
$('.slideshow > :gt(0)').hide();
setInterval(function(){$('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 5000);
});
</script>


and the CSS:

.slideshow {
position: relative;
}

.slideshow > * {
position: absolute;
left: 0;
top: 0;
}


My troubleshooting revealed that div height being 0 is commonly caused by floating children, but I don't believe that's my problem here. I could be wrong, I'm a novice.

Thanks for any help!

Answer

You're close. In this case it's not a float but the position: absolute that's preventing the children's height from being applied to the parent. In this case, I'd recommend setting a height on the slideshow itself.