Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

canvas height growing indefinitely while using <div> but not when using <span> (setup: bun+vite) #73

Open
remisharrock opened this issue May 3, 2024 · 2 comments
Open

canvas height growing indefinitely while using <div> but not when using <span> (setup: bun+vite) #73

remisharrock opened this issue May 3, 2024 · 2 comments

Comments

@remisharrock
Copy link

I cannot understand what's going on here. When I use a

the canvas height is growing indefinitely. When I use a it is not.
I have a setup with bun and vite and I run the project using bunx --bun vite
I have tried with firefox and edge, same behavior. I have attached a video for you to see, at the end.

Thanks for the help!

here are my files to reproduce:

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <script type="module" src="/main2.js"></script>
</head>

<body>
  <span id="ai"></span>
</body>

</html>

my main2.js

import AudioMotionAnalyzer from "audiomotion-analyzer";
let ai = document.getElementById("ai");
if (ai) {
  const audioMotion = new AudioMotionAnalyzer(ai);
}

and my package.json

{
  "name": "neocertif",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "bunx --bun vite",
    "build": "bunx --bun vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.2.0"
  },
  "dependencies": {
    "@codemirror/lang-python": "^6.1.6",
    "audiomotion-analyzer": "^4.4.0",
    "codemirror": "^6.0.1",
    "prismjs": "^1.29.0"
  }
}
Enregistrement.2024-05-03.041714Compressed.mp4
@remisharrock
Copy link
Author

ok I have found THE sentence that explains my problem :

height number
width number

Nominal dimensions of the analyzer.

Setting one or both properties to undefined (default) will trigger the fluid/responsive behavior and the analyzer will try to adjust to the container’s height and/or width. In that case, it’s important that you constrain the dimensions of the container via CSS to prevent the canvas from growing indefinitely.

@hvianna
Copy link
Owner

hvianna commented May 8, 2024

Yes, you can either set a desired height for the analyzer, or constrain your container's height.

Does this information solve the issue for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hvianna @remisharrock