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

useMaxWidth option doesn't work with Git Graph #3651

Closed
uttk opened this issue Oct 12, 2022 · 0 comments · Fixed by #3652
Closed

useMaxWidth option doesn't work with Git Graph #3651

uttk opened this issue Oct 12, 2022 · 0 comments · Fixed by #3652
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@uttk
Copy link
Contributor

uttk commented Oct 12, 2022

Describe the bug

useMaxWidth option doesn't work with Git Graph.

To Reproduce

Steps to reproduce the behavior:

  1. Run mermaid.initialize({ gitGraph: { useMaxWidth: true } })
  2. Render git graph using mermaid
  3. View the rendered SVG in Dev tools
  4. Check width attribute of svg tag

Expected behavior

width="100%" is set in the svg tag.

Screenshots

Below is an image rendered with the useMaxWidth option enabled.

image

Code Sample

I modified the demo source code ( demos/git.html ) a little.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Git Graphs Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>

  <body>
    <h1>Git diagram demo</h1>
    <pre class="mermaid">
    gitGraph:
    options
    {
    "nodeSpacing": 50,
    "nodeRadius": 5
    }
    end
    branch master
    commit
    branch newbranch
    checkout newbranch
    commit
    commit
    checkout master
    commit
    commit
    merge newbranch
    </pre>

    <script src="./mermaid.js"></script>
    <script>     
      mermaid.initialize({
        gitGraph: { useMaxWidth: true }
      });
    </script>
  </body>
</html>
@uttk uttk added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Oct 12, 2022
@uttk uttk mentioned this issue Oct 12, 2022
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Fix useMaxWidth option for git graph uttk/mermaid
1 participant
@uttk