AnsweredAssumed Answered

Canvas HTML editor scrubbing code from style guide. How to work around?

Question asked by jnickerson@bscs.org on Jun 1, 2016
Latest reply on Jun 21, 2016 by jnickerson@bscs.org

Greetings,

 

I have had some difficulties with a couple of the snippets from the Canvas Style Guide. Basically <button></button> gets scrubbed (which was easy to work around but still obnoxious, considering it is provided in the style guide).

 

The second is not as easy to work around, the Super Toggle Checkbox. When I take the code provided by the style guide and put it into the HTML editor it gets stripped down from this:

 

<div class="ic-Form-control">

  <!-- start super toggle -->

  <label class="ic-Super-toggle--on-off" for="super-toggle-demo1">

    <div class="ic-Label">Teacher View</div>

    <input type="checkbox" id="super-toggle-demo1" class="ic-Super-toggle__input">

    <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="On" data-unchecked="Off">

      <div class="ic-Super-toggle__switch">

        <div class="ic-Super-toggle__option--LEFT">

          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>

        </div>

        <div class="ic-Super-toggle__option--RIGHT">

          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>

        </div>

      </div>

    </div>

  </label>

  <!-- end super toggle -->

</div>

 

to this:

 

<div class="ic-Form-control">

    <div class="ic-Label">Teacher View</div>

    <div class="ic-Super-toggle__container" aria-hidden="true">

      <div class="ic-Super-toggle__switch">

        <div class="ic-Super-toggle__option--LEFT">

        </div>

        <div class="ic-Super-toggle__option--RIGHT">

        </div>

      </div>

    </div>

</div>

 

rendering it useless. Anybody have any suggestions or workarounds?

 

Thanks

Outcomes