Owl Carousels in collapsed Accordions causing size and display issues

[mdmnet]

Hello there,

since the Owl Carousel seems to be generating the dimensions of the carousel items and width dynamically through JavaScript, it can’t calculate the right dimensions, when initially set on

display: none;

through a parent div (in our case the collapsed accordion).

I tried to fix it with the following lines of css:

.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-body {
	height: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

.vc_tta.vc_general .vc_tta-panel .vc_tta-panel-body {
	height: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	display: block !important;
}

.owl-carousel .owl-stage-outer {
	width: 100% !important;
	height: auto !important;
}

This solution shows the carousel and the containing images in the right sizes again, but the minti_carousel container is way too high and I can’t seem to control the height yet.

Is there any better fix or possible solution for this?
We don’t really want to switch to anything else than the accordion element, because we want that exact functionality.

Thank you and best regards,

Levi

Ticket