Open VMoonLight opened 4 years ago
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.
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!
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);
});
},
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