Vue-carousel: Bug: Adjustable height is broken on both Firefox and IE11

[kristremblay]

Bug Report

Current Behavior
When using adjustable height, Firefox seems to present the carousel as having a height of only 48. If you click on the carousel after it loads, it will instantly resize to the proper height.

Input Code and steps to reproduce

• set :adjustableHeight="true"
• refresh

Expected behavior/code
The carousel height should initialize at the height of the first item. It works in Chrome but in FF/IE11 it initializes at 24 or 48 height.

Environment

• Browsers: Firefox / IE11
• OS: OSX 10.14.3

Possible Solution
After debugging it looks like it has something to do with getCarouselHeight().

[quinnlangille]

Hmm good catch @kristremblay, this seems like we're using some unsupported js. I'll flag and hopefully someone can take a look soon!

[sithuaung]

I did an ugly fix like this on page load.

document.getElementsByClassName('VueCarousel-inner')[0].style.height = "auto";

[quinnlangille]

@webcrazy thanks for posting! Definitely not ideal seems like it will work for anyone who is waiting for an official fix :octocat:

[sithuaung]

Thanks for your time @quinnlangille 👍

[boggyjan]

I resolved the problem by add two lines below:

.VueCarousel-slide-adjustableHeight {
display: block !important;
}
.VueCarousel-inner {
align-items: flex-start !important;
}

[jsblair9]

I believe that the issue is due to display: table; being set on the .VueCarousel-slide-adjustableHeight class. Firefox (unlike Chromium) creates an anonymous box around the element, when dealing with a table element that isn't a direct descendant of <table> which is what flexbox then basis it's size on. I _thought_ this had been fixed in Firefox 47, but I'm still encountering it in this case.

I'm not really sure why the display is being changed to table from block here in the first place... I'm sure there was a good reason when originally designed that way.

But, if you want a workaround then do what @boggyjan suggested

[bearcodi]

@jsblair9 great piece of research on the display: table; Firefox functionality.