[Help]: Resize children component with AutoHeight (when children component changes data).

[juanpmd]

Summary

Description

I want to build a slider form that adjusts the children height based on the component that is being displayed at the moment. The issue I currently have is when I display a extra message after certain functionality (e.g. display error message after a submit of the form). When this happens, the content overflows and the component does not resize the height.

Steps to reproduce

1. Navigate to the next slide in the carousel.
2. Click in the "Display error" button.
3. Notice how the content overflows without a proper auto height resize.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-auto-height-issue-c763nc

[davidjerleke]

@juanpmd this might be a duplicate of:

• [Bug]: Height is getting set to 0 #827 (comment)

Please read it and let me know if it solves the problem.

[juanpmd]

Thank you @davidjerleke for your quick message. Sadly it didn't work (I see the event is being triggered but the size is not being updated). Im not sure if im missing something here (I read through the same issues related to watchResize).

I jut added the watchResize to the codesandbox.

[davidjerleke]

@juanpmd sorry I misunderstood the question. I think this solution should work (you can remove the watchResize option all together):

useEffect(() => {
  if (emblaApi) emblaApi.reInit() // Re-initialize Embla when you toggle open something (note the dependency displayError in the array)
}, [displayError, emblaApi])

[juanpmd]

Thank you so much @davidjerleke for the help. It worked perfectly.