Dynamic height of items doesn't adjust actual carousel height about react-elastic-carousel HOT 10 CLOSED

@waynehaffenden the warning should be gone if you upgrade to the latest version v0.6.4 🙂

from react-elastic-carousel.

@sag1v Yep, all fixed, great job :)

from react-elastic-carousel.

Thanks @waynehaffenden , can you please create a minimal example in codesandbox?

from react-elastic-carousel.

@sag1v Hopefully this shows what I mean :) https://codesandbox.io/s/cool-kalam-vs4ye?file=/src/App.js

from react-elastic-carousel.

@waynehaffenden Thanks!
Can you please check if this css rule helps:

.rec.rec-slider {
  min-height: auto;
}

from react-elastic-carousel.

@sag1v Yes! This fixes the issue, will this be included in your package or is this something I should apply manually to my own projects?

from react-elastic-carousel.

@waynehaffenden I'm not sure it is wise to include in the lib as i think this might break some other views, especially vertical mode. Moreover i didn't encounter your scenario elsewhere, so not sure why exactly you were facing with this bug. Maybe the fact that the height is determined asynchronously after the image was fetched and rendered.

Anyway, i think for now we will leave it as is, if we see some more people get the same bug we will re-think this over.

from react-elastic-carousel.

@sag1v Makes sense, thank you for looking into this for me, really appreciate it.

from react-elastic-carousel.

@sag1v (Sorry!) Since adding your CSS fix above when resizing the browser window, I get this warning from React:

react_devtools_backend.js:6 Over 200 classes were generated for component styled.div with the id of "sc-AxhUy".
Consider using the attrs method, together with a style object for frequently changed styles.
Example:
  const Component = styled.div.attrs(props => ({
    style: {
      background: props.background,
    },
  }))`width: 100%;`

Any ideas?

I create a Styled div component that wraps your component with the css:

const CarouselWrapper = styled.div`.rec.rec-slider { min-height: auto; }`;

from react-elastic-carousel.

Yeah i think i know where this warning is coming from, i gave the element a height prop which is a valid html attribute for div's. I should re-name it so it wont get passed down to the underline DOM element.

Edit
Actually its also due to the fact that i'm dynamically setting the height via a css rule and not via a style object.

from react-elastic-carousel.