Full Width Carousel Slider Height Not Initialized Correctly

[legolas108]

Expected Behavior

A .carousel-slider Carousel with fullWidth: true option should initialize it's height in proportion to the current window width also if the first image hasn't loaded completely at the time of carousel initialization.

Current Behavior

A .carousel-slider Carousel with fullWidth: true option doesn't initialize it's height in proportion to the current window width if the first image hasn't loaded completely at the time of carousel initialization. Instead it initializes itself to the default height (400px) which may leave a gap below the carousel if the images are not that high.

Possible Solution

The bug seems to be in materialize/js/carousel.js:

    _setCarouselHeight(imageOnly) {
      let firstSlide = this.$el.find('.carousel-item.active').length
        ? this.$el.find('.carousel-item.active').first()
        : this.$el.find('.carousel-item').first();
      let firstImage = firstSlide.find('img').first();
      if (firstImage.length) {
        if (firstImage[0].complete) {
          //...
        } else {
          // Get height when image is loaded normally
// next line changed: single event function parameter "ev"
          firstImage.one('load', function (ev) {
// next line changed: get offsetHeight from "ev.target"
            _this65.$el.css('height', ev.target.offsetHeight + 'px');
          });
        }
      } else if (!imageOnly) {
        let slideHeight = firstSlide.height();
        this.$el.css('height', slideHeight + 'px');
      }
    }

Original code seems to assume getting an element reference as parameter to the 'load' event handler because calls it el and tries to get offsetHeight from this parameter which of course fails.

Steps to Reproduce

Seems to occur only with many and large images in the carousel.

Your Environment

Seems not to be relevant here.

[josh432]

Hello, I'm encountering this carousel bug with large images (about 13 images). The carousel sometimes shrinks to 400px on page load. I couldn't figure out why it was doing this for days but I finally thankfully found this issue. I'm using the materialize cdn. Will this issue be resolved/closed? Thanks!

[harri00413]

Looks like Materialize is no longer maintained.

[mxdpeep]

Looks like Materialize is no longer maintained.

support is on Gitter: http://gitter.im/Dogfalo/materialize

[harri00413]

Hi Filip,

Thanks for your reply.

I’m not talking about support, that is sort-of taken care of. I’m talking about software maintenance, documentation maintenance, bugs resolving etcetera.

Groeten,

Frank Harland

[email protected] 06 40 580 256

Op 30 mrt. 2020, om 16:39 heeft Filip Oščádal [email protected] het volgende geschreven:

Looks like Materialize is no longer maintained.

support is on Gitter: http://gitter.im/Dogfalo/materialize http://gitter.im/Dogfalo/materialize — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Dogfalo/materialize/issues/6300#issuecomment-606040316, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2TASOQVUH67YLCU5LRNT3RKCVKRANCNFSM4G4E3RUA.

[mxdpeep]

yeah, it's hard... I was told they are on a pause I have dozen projects running on this framework, but there are always options

[les113]

Looks like Materialize is no longer maintained.

support is on Gitter: http://gitter.im/Dogfalo/materialize

You're joking right?

[les113]

This issue is a problem with all full width sliders, even those with 1 image.

We've invested a lot of time into materializecss - they really should put a notice on materializecss.com to be upfront with users.

[doughballs]

This issue is a problem with all full width sliders, even those with 1 image.

We've invested a lot of time into materializecss - they really should put a notice on materializecss.com to be upfront with users.

You didn't even ask your question in the Gitter channel, you asked about opening issues - and I told you that the theme devs are not quick to respond, but that there is a fork - this is open source after all - with a bunch of people moving the framework forward - which might be a better place to get a response.

For general how-to stuff, bugs etc - just ask in the Gitter, but maybe be nicer about it otherwise people won't be falling over themselves to help you.