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

HTML - lots of whitespace above diagram #64

Open
DrGriff opened this issue Jun 21, 2021 · 0 comments
Open

HTML - lots of whitespace above diagram #64

DrGriff opened this issue Jun 21, 2021 · 0 comments

Comments

@DrGriff
Copy link

DrGriff commented Jun 21, 2021

I have the following "standard" HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My diagram</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true})</script>
</head>
<body>
<h2>My diagram</h2>
<div class="mermaid">
....
</div>
</body>
</html>

(mermaid markup removed for brevity)

When this page renders with my flow-chart (it's a biggy) then I see my h2 title "My diagram" and then have to scroll down a long way to see the top of the diagram.

If I look in the svg I see:

<svg id="mermaid-1624272648209" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="5647.30859375" style="max-width: 3097.140625px;" viewBox="0 0 3097.140625 5647.30859375">

If I manually change the height to be height="100%" (which matches the width) then this appears on the page as I would expect.

Is this a bug or desired behaviour? If desired, then is there a way I can instruct Mermaid that I want the height to be 100% for my webpage? Maybe using a directive?

Thanks
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
1 participant
@DrGriff