[ARCHIVED] Is there a resource/guide that shows what HTML/CSS is allowed in the Rich Context Editor?

[zal5010]

Hi, I'm trying to format/customize a div with border-radius: 15px 50px;. When I add the code and preview in the Rich Context Editor, the div shows the intended result. However, when I save, Canvas strips out the border-radius, but keeps the padding and margins. I would like to have more than a simple box, but it looks like Canvas does not allow customization to this level. Can anyone verify? Thanks!

[kona · Accepted solution]

 @zal5010 ​, I think this HTML_Whitelist.pdf and Canvas LMS Style Guide - are what you are looking for!

[ajohnson]

Anyone know how to request things be added to the whitelist? For instance, table caption alignment and title on iframes would be nice (the latter is required by our departments accessibility guidelines)

[kona]

 @annmarie_johnso , I checked with Canvas Documentation and if you'd like to get something added to the whitelist you'd want to request it via a Canvas Feature Idea​. Here's a little more on how to do this if you're interested - How do I create a new feature idea?​

Hope this helps!

[James]

There is no need to file a feature request for the two things you've mentioned.

When you look at the HTML Whitelist, there is a note near the top:All elements allow style ... title ...

Since iframe is a supported tag, it supports the title. You'll need to view the HTML to fix it, but you're probably viewing HTML if you're inserting your own iframe anyway.

Table captions should be aligned using CSS through the style attribute. The align attribute has been deprecated since HTML 4.01 and obsolete since HTML 5. Once again, style is allowed on all supported tags. You can include a caption within a table, so to make it left aligned, you would do something like this right after the opening table tag.

<caption style="text-align:left;">Summary Statistics</caption>

Again, you'll need to edit HTML to set the style. You cannot use the left, right, or center alignment buttons.

Btw, the align tag for a table cell suffered the same fate and is no longer guaranteed to work.

Asking for a smoother experience or easier to apply within the Rich Content Editor might be a feature request, but asking that they be added to the WhiteList isn't going to do any good because they are already supported.

[ajohnson]

Thank you! Glad to know it about title. However, for captions, Canvas still strips out align = "bottom" which is what we want to do on a specific table type (putting the caption below the table instead of at the top, which is the default). But not on all tables, so putting it in the CSS isn't a viable option. It also doesn't work as a style tag. Any other possibilities?

AnnMarie

[James]

Try the CSS directive caption-side​

<caption style="caption-side: bottom;">Summary Statistics</caption>

However, that page suggests that only Firefox supports it, but CSS Properties/Table Styles/position of the table caption  works for me in Chrome as well (left and right are not well supported)

Unfortunately, you can't change the position of the <caption> within the <table>, it must come first​ if you have it.  So, your best bet is caption-side:

[James]

I was rushed as class was about to start and didn't get a chance to check it out before posting. The caption-side attribute is not allowed in the HTML whitelist, so I guess that's not a solution.

[zal5010]

Thanks Kona, that's exactly what I was looking for!

[kmeeusen]

amaloney​ and  @zal5010 ​

You  can just append the "Name="YOUR TITLE HERE" element in the style section, or use the title attribute as  @James  mentioned? Another tip would be to use a free iFrame generator. like http://7thspace.com/webmaster_tools/iframe_generator.html. The dialog box in the generator permits you to enter an iFrame name. This is a handy thing when you are not a coder, and I am not, but I am an accomplished code thief! Use it once, then look at the change in the embed code, and you'll have it forever!

I hope this helps,

Agent K

[Shar]

Hi  @zal5010 ​,

Also, if you're trying to get a fancier looking div box, I suggest using div class="img-rounded" or "border-round" and it'll give you a rounded corner box that does not get stripped away in Canvas.

<div class="img-rounded" style="width: 49%; float: left; border: 1px solid peachpuff; overflow: auto;"> makes a finely thin box that's just enough to not get noticed.

Good luck,
Cheers - Shar!

[zal5010]

Thanks ishar-uw​, that helps. However, I may be getting a little too picky, haha. My original goal was to implement this code: "border-radius: 15px 50px;"

This only rounds the top right corner and the bottom left corner, which provides a fancy, yet simple looking div box. Is something like that possible with our limited options? Thanks!

[tom_gibbons]

I will not tell my story of pounding my desk at 3 am and exclaiming, "I need rounded corners! Why can't Canvas understand that I need rounded corners?!?"

So, yeah. No on the border-radius in hand-coded styles. Only invokable through the style guide divs. Or if you created an entirely separate HTML document and loaded it into Files, along with any CSS and other collateral. Then you can add it to the module as a content item. But it doesn't work in the app very well.

[Shar]

Hi  @zal5010 ​,

Today in the Canvas Styleguide, I ran across some more border styling that might be what you were looking for: Canvas LMS

Scroll down a bit to Border Radius. It's not the top right & bottom left you were going for, in fact it seems to be limited to only top left, all bottom, all top.

Stay shiny!
Cheers - Shar