cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
hechla
Community Participant

Canvas Removes Link Code From HTML

Jump to solution

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

Labels (1)
Tags (3)
0 Kudos
1 Solution

Accepted Solutions
and-hu
Community Participant

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). 

View solution in original post

0 Kudos
3 Replies
werner_huysman1
Community Participant

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
Community Participant

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
Community Participant

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). 

View solution in original post

0 Kudos