cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
chava
Community Member

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

Jump to solution

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 "allowlist" 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>
1 Solution

Accepted Solutions
James
Community Champion

chava,

 

The style guide is for the Canvas application and developers of Canvas. It is not intended to be used by end-users creating content in their courses, although that is something that people often try to do with it so many people mistake it for that purpose. I agree with your assessment, and this has been confirmed by Canvas employees, that it is not always updated.

 

Here is what  @dlyons  wrote in the link I provided above:

The Canvas Styleguide is the styleguide for the Canvas application, not for content created in Canvas. This is why the styleguide is not documented, why changes to it are not always communicated in the release notes, and why some things in the styleguide do not function as expected when creating content. That being said, if you know what you're doing and understand the risks, I've seen some cool content built utilizing the styleguide. Just don't let yourself count on it the way you count on what is in the release notes and the Guides.

 

On the other hand, the Canvas HTML Editor Allowlist is designed for the end-user and is part of the official documentation and is supported and updated. The input, label, and select elements are not in the whitelist, so they were stripped. It's nice to know that it left the text there.

 

If you want to add accordions, then you will need to use custom JavaScript, load your own libraries, and then use classes or something else that is supported by the HTML Editor Whitelist to mark it up as such. This has been discussed multiple places in the Community in the spring of 2017 after Canvas announced they were deprecating support for jQuery UI. Accordions were the first thing dropped.

 

Here are links to some of those discussions.

 

Adding custom JavaScript and CSS requires admin level permissions for the account or subaccount and cannot be done at a course level. If you can get the Canvas Admin to add the custom code, then instructors or designers can add the classes to their content.

 

Some people choose to embed the content in an iframe (I'm not a big fan of that). You can also make an LTI application that will display content (you can use the Style Guide as long as you load the proper CSS and libraries).

 

For content that is native to Canvas, you have to live by the HTML Editor Allowlist. It's there to improve the experience and provide a consistent, usable, safe, and secure environment.

View solution in original post

7 Replies
James
Community Champion

chava,

 

The style guide is for the Canvas application and developers of Canvas. It is not intended to be used by end-users creating content in their courses, although that is something that people often try to do with it so many people mistake it for that purpose. I agree with your assessment, and this has been confirmed by Canvas employees, that it is not always updated.

 

Here is what  @dlyons  wrote in the link I provided above:

The Canvas Styleguide is the styleguide for the Canvas application, not for content created in Canvas. This is why the styleguide is not documented, why changes to it are not always communicated in the release notes, and why some things in the styleguide do not function as expected when creating content. That being said, if you know what you're doing and understand the risks, I've seen some cool content built utilizing the styleguide. Just don't let yourself count on it the way you count on what is in the release notes and the Guides.

 

On the other hand, the Canvas HTML Editor Allowlist is designed for the end-user and is part of the official documentation and is supported and updated. The input, label, and select elements are not in the whitelist, so they were stripped. It's nice to know that it left the text there.

 

If you want to add accordions, then you will need to use custom JavaScript, load your own libraries, and then use classes or something else that is supported by the HTML Editor Whitelist to mark it up as such. This has been discussed multiple places in the Community in the spring of 2017 after Canvas announced they were deprecating support for jQuery UI. Accordions were the first thing dropped.

 

Here are links to some of those discussions.

 

Adding custom JavaScript and CSS requires admin level permissions for the account or subaccount and cannot be done at a course level. If you can get the Canvas Admin to add the custom code, then instructors or designers can add the classes to their content.

 

Some people choose to embed the content in an iframe (I'm not a big fan of that). You can also make an LTI application that will display content (you can use the Style Guide as long as you load the proper CSS and libraries).

 

For content that is native to Canvas, you have to live by the HTML Editor Allowlist. It's there to improve the experience and provide a consistent, usable, safe, and secure environment.

View solution in original post

Is the Canvas HTML Editor Allowlist still up to date? We've noticed that scrolling and frameborder elements are being stripped from our iframe code?

 @nate_ewings ‌, we'd like to investigate this further. Have you reported this to Canvas Support yet, and if so, would you provide the case number for the interaction? (And if you haven't, would you initiate a case? The Report a Problem option on the Help menu is perfect for this.)

I just reported it. We've seen other behavior as well. For example,

-HTML comments are deleted out

-Any empty <span> tags are deleted. This is a problem for the icons we use e.g.,  <span class="icon resources"> </span>.  When we edit a page Canvas is automatically deleting our empty tags. This just started happening about a month ago.

Thanks for reporting it,  @nate_ewings ‌. What is the case number?

04903212

Thanks,  @nate_ewings ‌. We'll check this out.