Full Width Carousel Slider Height Not Initialized Correctly

legolas108 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

Looks like Materialize is no longer maintained.

mxdpeep commented 4 years ago

Looks like Materialize is no longer maintained.

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

harri00413 commented 4 years ago

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

fharland@gmail.com 06 40 580 256

Op 30 mrt. 2020, om 16:39 heeft Filip Oščádal notifications@github.com 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 commented 4 years ago

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 commented 3 years ago

Looks like Materialize is no longer maintained.

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

You're joking right?

les113 commented 3 years ago

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 commented 3 years ago

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.

Dogfalo / materialize