Several elements on a page

Grahack commented 3 years ago

Hi, Thanks for this project, promising!
It currently seems that I only can incorporate one element in a whole page: the second seems to steal the div of the last element.
Is there a workaround?

Grahack commented 3 years ago

Here is what I tried (this is some ClojuseScript code:

[:> default {:id "petit" :className "petit" :notation "a"}]                   
[:> default {:id "grand" :className "grand" :notation "A"}]

Which renders:

<div id="paper" class="petit"
     style="overflow: hidden; height: 115.81px;">
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" role="img"
       width="1215" height="115.81">
    <title>Sheet Music</title>[…]
  </svg>
</div>
<style>
          #paper .abcjs-note, #paper .abcjs-rest {
            transition: 0.2s;
          }

          #paper .abcjs-note-playing {
            fill: #d10fc9;
          }
</style>
<div id="paper" class="grand"></div>
<style>
          [...same CSS code with #paper target...]
</style>

So className is correctly handled but there are two #paper divs.

Grahack commented 3 years ago

I just realised I was using the only version available on NPM (0.0.1) and that there was a 0.0.5 here on Github. Gonna try this newer version. If you need some help for housekeeping like publishing I could give a hand (it's a few command lines though).

mlava commented 3 months ago

@Grahack did you ever figure out how to get the id to work?

slnsw / react-sheet-music

Several elements on a page #5