Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Exempt child element from parent element's "overflow: hidden" CSS property?

Working on setting up a bootstrap carousel here: http://test.lt11.com/about/inside/

The bootstrap carousel has the option to add captions to each slide by adding a div element with the class .carousel-caption, within any div element with the class .item. The captions are working just fine but by default they show up on top of the slides. Since my carousel is being used for video content I don't want the captions on top of the video but rather below it. I tried to do this by changing the "bottom" CSS property of the .carousel-caption element to a negative value to push it below the carousel but the problem is the necessary parent .carousel-inner element has the "overflow" CSS property set to "hidden." If I change that property, I can push the captions below the carousel but then the slides in the carousel are briefly visible when they slide to either the left or right, which is not what i want at all :) Is there a way to exempt the .carousel-caption element from its parent .carousel-inner element's "overflow: hidden" CSS property? Or link each slide content to an element that is outside the .carousel-inner element? Seems like the latter might be more complicated. I don't know. Thanks for any help!

User Gravatar

bigchokeslam

Posted Jun 10 2014 13:39 UTC

$25


  • Assigned To tripflex
  • Solved
  • javascript
    jquery
    html
  • 4006 Views

5 Replies


By below it do you mean under the current 2 circles below the image?

If you don't want to edit the source plugin, you could copy the code with jQuery into another div id that you set to show up where you want it, and then remove the original code.

Do you need an example of how to do it that way?

User Gravatar

a53mp

Posted Jun 10 2014 14:19 UTC

Moving the caption below the slider is as simple as adding this CSS:

.carousel-caption {
    position: relative;
}

http://www.bootply.com/elrM6pwL25

User Gravatar

tripflex

Posted Jun 10 2014 14:26 UTC

Ah just realized that doesn't work in BS3 ...

So here's an example using BS3 and jQuery:

http://www.bootply.com/wngSniePbu

Just edited it as well ( 6:07 PM EST ) to work with WP as you have to declare jQuery

User Gravatar

tripflex

Posted Jun 10 2014 14:36 UTC

Solution

This didn't solve your task? Get your own custom solution.

Fix for your other task https://www.codersclan.net/ticket/341 fixes this too.

If you change your jQuery ready to this, you captions will be under videos and your videos responsive and automatically fiting to the parent container.

$(document).ready(function(){
    // Target carousel container
    $("#carousel").fitVids();
});
User Gravatar

renekorss

Posted Jun 10 2014 23:01 UTC

Thanks everyone! tripfex, that worked better than birth control and condoms at the same time.

User Gravatar

bigchokeslam

Posted Jun 11 2014 9:37 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions