The dotlottie-wc web component does not display correctly when the height is set to auto. It requires a min-height or explicit height value to render properly.

vsarangan commented 5 months ago

Steps to Reproduce:

Include the dotlottie-wc component in your HTML. Set the height of the component to auto (e.g., via CSS). Observe that the component does not render or display as expected.

Expected Behavior: The dotlottie-wc component should automatically adjust its height based on the content and display correctly when the height is set to auto.

Actual Behavior: The dotlottie-wc component does not render or display correctly when the height is set to auto. It only displays correctly when a min-height or explicit height value is provided.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dotlottie-wc Test</title>
    <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
  <style>
    .lottie-container {
      width: 100%;
      height: auto; /* The problematic setting */
    }
  </style>
</head>
<body>
  <div class="lottie-container">
       <dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>

  </div>
</body>
</html>

theashraf commented 5 months ago

Thanks, @vsarangan. I'll take a look and let you know

theashraf commented 5 months ago

@vsarangan It looks OK to me. The canvas width or height will follow its parent container's width and height, and the player will determine the drawing surface area based on the width and height of the canvas in a way that maintains the aspect ratio. To me, this seems to be the correct aspect ratio of the animation.

Can you provide a CodePen with the reproducible issue you're referring to ? Thanks.

vsarangan commented 5 months ago

@vsarangan It looks OK to me. The canvas width or height will follow its parent container's width and height, and the player will determine the drawing surface area based on the width and height of the canvas in a way that maintains the aspect ratio. To me, this seems to be the correct aspect ratio of the animation.

Can you provide a CodePen with the reproducible issue you're referring to ? Thanks.

vsarangan commented 5 months ago

@vsarangan It looks OK to me. The canvas width or height will follow its parent container's width and height, and the player will determine the drawing surface area based on the width and height of the canvas in a way that maintains the aspect ratio. To me, this seems to be the correct aspect ratio of the animation. Can you provide a CodePen with the reproducible issue you're referring to ? Thanks.

vsarangan commented 5 months ago

Hi @theashraf, The dotlottie-wc component works as expected when the parent container has explicit height and width values. However, if the parent container's height is set to auto and adjusts dynamically based on its content, the component is not rendered. please refer the above code

theashraf commented 5 months ago

Hi @theashraf, The dotlottie-wc component works as expected when the parent container has explicit height and width values. However, if the parent container's height is set to auto and adjusts dynamically based on its content, the component is not rendered. please refer the above code

Am i missing something in the provided code ? https://codesandbox.io/p/sandbox/dotlottie-wc-test-lctpdk?file=%2Findex.html%3A5%2C7

vsarangan commented 5 months ago

Hi @theashraf , Thanks for your response. I have provided the sample codesandbox, please use it for reference codesanbox

theashraf commented 5 months ago

@vsarangan one way to solve this issue is to create an independent container for the dotlottie-wc, as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dotlottie-wc Test</title>
    <script
      type="module"
      src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"
    ></script>
    <style>
      .lottie-container {
        width: 100%;
        height: auto; /* The problematic setting */
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="lottie-container">
      <div style="position: absolute; width: 100%; height: 100%">
        <dotlottie-wc
          src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
          autoplay
          loop
        ></dotlottie-wc>
      </div>
    </div>
  </body>
</html>

This should help address the issue.

vsarangan commented 5 months ago

Hi @theashraf , Thanks for your response. Unfortunately, the suggested workaround isn't working for my use case. I am trying to use dotlottie-wc as a background image.

Actual Output: The dotlottie-wc component is taking up the entire screen height instead of the specified height.

Expected Output: The dotlottie-wc component should be 200px in height.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>dotlottie-wc Test</title>
        <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
        <style>
            .lottie-container {
                width: 100%;
                height: auto; /* The problematic setting */
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="lottie-container">
            <div style="position: absolute;width: 100%;height: 100%;">
                <dotlottie-wc
                    src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
                    autoplay
                    loop
                ></dotlottie-wc>
            </div>
            <div class="demos">
                <p>Some text</p>
            </div>
        </div>
    </body>
    <script>
        setTimeout(() => {
            document.querySelector('.demos').style.height = '200px';
        }, 1000);
    </script>
</html>

Please refer the attached screenshot of the output:: image_2024-06-09_154042147

theashraf commented 5 months ago

@vsarangan Gotcha!!

I've updated the example to achieve the expected output

https://codesandbox.io/p/sandbox/dotlottie-wc-test-forked-r4zptd

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dotlottie-wc Test</title>
    <script
      type="module"
      src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"
    ></script>
    <style>
      .lottie-container {
        width: 100%;
        height: auto;
        position: relative;
      }
      dotlottie-wc {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="lottie-container">
      <dotlottie-wc
        src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
        autoplay
        loop
      ></dotlottie-wc>
      <div class="demos">
        <p>Some text</p>
      </div>
    </div>
    <script>
      setTimeout(() => {
        document.querySelector(".demos").style.height = "200px";
      }, 1000);
    </script>
  </body>
</html>

vsarangan commented 5 months ago

Hi @theashraf , Thank you for your reply. We've already implemented the suggestion mentioned above, and it's functioning well as provided earlier. We now have a use case where we need to retrieve the height and width information of the .lottie file. Is there any available option to obtain this information?

theashraf commented 5 months ago

@vsarangan Glad that it works

There is no direct way at the moment to retrieve the original width and height of the animation

vsarangan commented 5 months ago

@theashraf , Thanks for the prompt responses. It helps a lot

vsarangan commented 5 months ago

Hey @theashraf, I have a question about an error I'm encountering. Here's the error message: dotlottie-wc : chunk-O5GMJN34.js:1 Uncaught DOMException: Failed to construct 'ImageData': The source width is zero or not a number. Could you help me understand what might be causing this?

theashraf commented 4 months ago

The animationSize method has been added to dotlottie-web v0.26.0.

You can now get the Lottie animation size and update the canvas styles accordingly after the animation is loaded.

Here is a code example:

dotLottie.addEventListener("load", () => {
  const animationSize = dotLottie.animationSize();

  canvas.style.width = `${animationSize.width}px`;
  canvas.style.height = `${animationSize.height}px`;

  dotLottie.resize(); // Must call this method after the canvas is resized so dotLottie can resize its internal frame buffer size accordingly.
});

I hope this CodePen achieves what you're looking for: https://codepen.io/lottiefiles/pen/xxNNGxE

theashraf commented 4 months ago

Hey @theashraf, I have a question about an error I'm encountering. Here's the error message: dotlottie-wc : chunk-O5GMJN34.js:1 Uncaught DOMException: Failed to construct 'ImageData': The source width is zero or not a number. Could you help me understand what might be causing this?

@vsarangan Sorry, i missed this one

do you display: none on DotLottieReact or its parents ?

github-actions[bot] commented 2 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

LottieFiles / dotlottie-web

The dotlottie-wc web component does not display correctly when the height is set to auto. It requires a min-height or explicit height value to render properly. #230