Jump to content

Topic on Extension talk:Mermaid

Mermaid CSS issue with Metrolook Skin

1
Revansx (talkcontribs)
  • Mermaid 2.2.0
  • MW 1.34.1
  • Skin:Metrolook 7.0 alpha 2 (118084b) 16:20, 23 April 2020

The SVG elements generated by Mermaid are hard-coded with height=100% in the SVG element. This is not a problem in Vector but for whatever reason there is an issue with value of "height" when using the Metrolook Skin. With a height value of 100% from Mermaid the SVG is always 100% of the screen height which produces lots of unwanted white-space above and below the SVG. I have been able to fix this by adding the following CSS to Mediawiki:Common.css:

svg { height:auto }

but I wanted to share this with the Mermaid folks in case:

  1. Other people are having this issue or
  2. The mermaid maintainers think changing the current "height=100%" SVG attribute to "height=auto".

Thanks!

- Revansx (talk) 01:04, 13 May 2020 (UTC)

Reply to "Mermaid CSS issue with Metrolook Skin"