Canvas Removes Link Code From HTML

[hechla]

Hello all, I've searched the community but can't find this scenario. 

First, I'm little more than a beginner/intermediate coder. I don't live in html and css, although I understand it fairly well. I just have minimal experience writing it. So, my code may not be pretty or the most efficient. I can take some constructive criticism but please don't bash me for trying.

Anyway, I've done some custom css in trying to create dynamic buttons in our courses. I've created some code based on some examples I've found online. I've also verified the html as fully compliant with html5. When I save everything in the RCE it works perfectly. But, if I try to edit the content again (with the RCE), the link portion of the code is gone. 

My custom css adds a class for "btn-link," and further styles the "button" class, <a> tag and <img> tag that are nested inside btn-link (so the custom css doesn't mess with all button, <a> tags and <img> tags). 

So this is a sample of the code I start with (I've changed some to make it more generic).

<a title="Course Home Page" href="https://[ourdomain].instructure.com/courses/1/pages/course-home-page" class="btn-link">
   <div class="button">
      <img src="https://[validlinktoimage] alt="home" >
      <span>Home</span>
   </div>
</a>
<br />

After I go back in to Edit the content on the page, this is all that appears in the code: 

   <div class="button">
      <img src="https://[validlinktoimage] alt="home" >
      <span>Home</span>
   </div>
<br />

The actual link text gets completely stripped from the code.  

Now, I've had some inline css styling stripped before (and I can't seem to find any clear documentation on what's NOT supported within Canvas) but I think this is first time I've ever had a whole line of code stripped. I've contacted one of the ID consultants at Canvas and with her assistance I've been able to rework it a little. But I'm really curious if anyone can explain WHY the link was getting stripped from this code? As I said, I verified that its valid html using the w3c validator. And I want to avoid this happening in the future.  

Thanks, Adam

[werner_huysman1]

Hi,

I tried to reproduce it and it seems the link code is stripped from the html view in the editor, but still exists in the page html. In my example the image is still clickable and points to the url I provided, and the link code is visible in the browser inspector. Don't know why the html-viewer is doing that though.

[hechla]

Did you save it again after "editing" it (you don't even need to change anything, just go to edit it and then re-save)? That's when I noticed the links were gone and the button wasn't clickable anymore. 

[and-hu · Accepted solution]

I've found that when your "a" tag (an inline-level element) is wrapped around block-level elements (in this case, "div"), Canvas doesn't like it and strips the link despite this structure being HTML5 compliant. If you were to change the "div" to a "span", or swap the positions of the "div"/"a" tags, it should stop being stripped. In this case, I'm not exactly sure you need the "div", but then the "button" class does nothing on my instance (only "btn" does). 

[pstisser]

I need to use lang codes in Canvas HTML editors.  When will they be approved code?  Right now, the code stays, but doesn't react to the voice chosen.