Carousel has zero height on being initialized within invisible container.

[VMoonLight]

Hello! Is there a way to force a refresh the carousel being plugged into in inactive Bootstrap tab? Here is a test environment where we can see that carousel at the second tab is zero-height. Manually checking a css rule via Chrome Dev Tools makes the carousel back but the bug takes place. And there's no idea how to fix it fast. Thanks

[simondrabble]

I was able to fix this with the following:

<carousel ref="my-carousel" ...>...</carousel>

then in mounted:

setTimeout(() => { this.$refs['my-carousel'].$el.style.height = 'auto'; }, 50);

It's a little hacky but it works.

[kaypon]

I was able to fix this with the following:

<carousel ref="my-carousel" ...>...</carousel>

then in mounted:

setTimeout(() => { this.$refs['my-carousel'].$el.style.height = 'auto'; }, 50);

It's a little hacky but it works.

This works!

[VMoonLight]

As I can see, the issue still affects some people, so here's another solution.

mounted() {
        // make carousel to react tab switching
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            const el = document; // This can be your element on which to trigger the event

            const event = document.createEvent('HTMLEvents');

            event.initEvent('resize', true, false);

            el.dispatchEvent(event);
        });
    },