AnsweredAssumed Answered

Style Guide Out of Date? Input fields are being stripped from Editor

Question asked by C W on Jan 2, 2018

I am trying to create accordion toggle areas on several of our course pages. As regular JS/Bootstrap is not supported, I tried using pure HTML/CSS via <input> and <label> elements. When that didn't work, I turned to the Canvas Style Guide. According to this, I should still be able to add HTML form features, such as <input> and <label>, provided I add them with the class names and format as outlined in their guide. Neither the form I tried to build (see code examples at bottom), using these guidelines, nor the unaltered code taken straight from the guide will work. In both cases, the <input> and <label> tags are stripped from the code editor after saving. With the style guide not working, JS not supported, and other workarounds (such as using tabindex + focus, where the "tabindex" attribute is not supported) not working, is there any way to have toggle buttons, checkboxes, input and label fields, and other dynamic HTML features in our course pages?

 

Our objective here is to have three, or more, lists and allow users to show/hide each list as needed.

(Note: I am aware of the "whitelist" of HTML elements, which is not referenced in the Style Guide. Many elements are listed, and used, in the Style Guide but are not on the "whitelist", so who knows what's actually supported.)

 

My code, using the Canvas Style Guide, was stripped from this:

<div class="ic-Form-control ic-Form-control--checkbox">
<input id="video-1-tab" class="tab-lists-input" type="checkbox" name="tabs">
<label class="ic-Label tab-lists-label" for="tab-one">Lesson 1 Videos</label>
</div>
<div class="tab-lists-content">
<ul>
<li><a id="link1" href="#dialog_for_link1">Talk</a> </li>
<li><a id="link2" href="#dialog_for_link2">Awesome</a></li>
</ul>
</div>
down to this:
<div class="ic-Form-control ic-Form-control--checkbox">Open Section 1</div>
<div class="tab-lists-content">
<ul>
<li><a id="link1" href="#dialog_for_link1">Talk</a></li>
<li><a id="link2" href="#dialog_for_link2">Awesome</a></li>
</ul>
</div>
I also tried adding the unedited code straight from the Form section of the Style Guide into the content editor and that, too, was stripped from this:
<div class="ic-Form-control">
  <label for="demo-text-input-1" class="ic-Label">This is a label</label>
  <input type="text" id="demo-text-input-1" class="ic-Input" placeholder="Don't forget a helpful placeholder">
</div>
<div class="ic-Form-control">
  <label for="demo-text-input-2" class="ic-Label">This is another label</label>
  <select class="ic-Input" id="demo-text-input-2">
    <option>This is an option</option>
    <option>This is another option</option>
    <option>This is yet another option</option>
  </select>
</div>
down to this:
<div class="ic-Form-control">This is a label</div>
<div class="ic-Form-control">This is another label This is an option This is another option This is yet another option</div>

Outcomes