HTML - lots of whitespace above diagram
Opened this issue · 0 comments
DrGriff commented
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