SVG height conflict between abc2 plugin and bootstrap3 theme1

[tomkeays]

The bootstrap3 theme has a style rule that sets all SVG files to a height of 1.2em. Apparently, it assumes SVGs will only be used for icons.

Fortunately, bootstrap3 sets that rule directly on the svg element, so it is easy to override. By namespacing it to the abc2 plugin, you can help ensure it doesn't come into play too broadly. I added this rule to both the style.css and print.css files.

/* override bootstrap3 template setting SVG height to 1.2em */
.abc2-plugin svg,
.abc-render svg {
  height: auto;
}

An unrelated change I made to the style.css file was the addition of the following rule. I noticed, when the browser viewport was wider than the width of the rendered SVG files (each line of staff notation is 680px wide in both the abc2svg and abc-ui libraries), subsequent lines of rendered notation would float to the right of the previous line. So, if your browser window was at ~1400px or higher, you would get something like this:

[  NOTATION LINE 1 ..............]   [  NOTATION LINE 2 ..............] 
[  NOTATION LINE 3 ..............]   [  NOTATION LINE 4 ..............] 

To avoid this, I constrained the container by displaying it as a 700px wide block.

.abc2-plugin,  
.abc-render {
  display: block;
  max-width: 700px;
}

[splitbrain]

This is not bootstrap related. SVG default height is set in DokuWiki core. See https://github.com/dokuwiki/dokuwiki/issues/3690

[selfthinker]

The SVG height issue has now been fixed.