cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
michael5
Community Contributor

Canvas HTML editor overriding iframe width/height

Hello,

We are having a major issue which I think is a bug. It's a little difficult to explain, but I'll try my best. 

In short, we've discovered that the Canvas HTML editor is deleting width/height properties of iframes which causes a lot of functional and aesthetic issues on our pages. Does anyone know of a fix for this?

Step-by-step explanation:

1. In our courses and on our sub-pages, we use a lot of iframes to link to external content. In the example below, I have a banner in an iframe (the red banner that says "Flere valg"). When I inserted the iframe, I manually assigned a suitable width/height proportion.

241612_pastedImage_1.png

2. When I want to edit the quiz, the width/height proportions remain the same. (note how the iframe box in the rich editor fits the screen size of the editor window).

241661_pastedImage_2.png

3. When I go to the HTML editor, the width/height proportions are deleted (or "overridden by nothing"). (note that the HTML code has no width/height properties anymore, but only a link ("src=...")). 

241662_pastedImage_3.png

4. Upon returning to the rich editor or saving, the iframe is resized to default (default meaning no (manual) width/height properties). 

241663_pastedImage_4.png

This is a major issue and I'm assuming it's a bug as this issue only started happening a few weeks ago. I'm reporting it to Canvas tech support, but I'm hoping somebody can help fast in here. 

9 Replies
Stefanie
Community Team
Community Team

 @michael5 ‌, does the solution provided by msgarcia‌ at the bottom of this conversation--https://community.canvaslms.com/message/71567-iframe-issues-reverts-to-300x150 --help?

cristinanistor
Community Contributor

 @michael5  It would have been interesting to see the code for the iframe before Canvas edits it in order to say with certainty if there is a bug or if there is an issue with the iframe code. 

As I have noticed from using the Rich content editor in Canvas for the past couple of months it looks like it is set on "purifying" the HTML code by default, removing any tags or lines of code that can't be read/executed. This prevents other error messages in HTML5 enabled browsers that would not run the code if there's a problem with it. 

In the meantime you could try deleting the iframe, copying the code back in again and defining the width and height manually (for example <iframe width="640" height="360" ).

Alternatively you could create a table and insert the iframe embed code between the <td></td> tags. Then you can modify the dimensions of the table from the table tool bar without having to edit the HTML code. 

 

michael5
Community Contributor

I tried and it doesn't help to replace it with inline-css. 😞

Also, I just noticed the problem only occurs in quizzes/assignments so I'm pretty sure it's not an intended override behaviour. 

michael5
Community Contributor

It was just <iframe width="2000" height="115" src="..."></iframe>.

And yes, I think this is an update bug as it used to work. The HTML editor overrides/purifies many elements but width and height are pretty essential to be in control of on all elements, especially iframes so I can't imagine this is supposed to happen. The table solution could work sometimes but we also have scripted elements pulled from external sources that won't respond well to that. If it was only about images I would just upload them as SVG files to fix scaling issues. 

Thanks for the tips anyways. 🙂

snugent
Community Champion

This has been happening to me ever since the June 3 release. I have a ticket on this and I have posted this thread in my ticket. I let you know what I hear back from support. 

Robbie_Grant
Community Coach
Community Coach

 @michael5 ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie

Not solved for me... I've tried the single cell table trick. different sizing tricks. I can get it so it does not re-size my code to 300x150.

My issue is the container around my iframes. The iframes themselves are large enough, but the canvas container is not re-sizing to match any content (iframe or otherwise)

michael5
Community Contributor

Hey,

I experimented a lot with it over the past 2 months. I think Canvas pushed some updates on it as well, so it's confusing. However, I think I have the best solution (which ironically is what I was doing all along and stopped doing after Canvas began overriding the width/height proportions). 

Sorry if this is not the clearest example, but it's what I have to work with at the moment. In this image, you see 2 iframes (content is identical in all except size). The first iframe is within a table, and the second is just an iframe that stands alone. 

https://danes-online.dk/Screen%20Shot%202017-09-28%20at%2009.44.46.png

In this image, I've scaled the browser window down. The second iframe follows the window width, the first remains static. We prefer the second solution in almost every scenario; ie. we want an iframe that scales to the user's window size and has no scroll bars (although y-axis scrollbars are sometimes unavoidable).

https://danes-online.dk/Screen%20Shot%202017-09-28%20at%2009.47.33.png

Here's the HTML code for the 2 iframes, and this is where it gets really confusing.

<table style="width: 640.052px; float: left;">
<tbody>
<tr style="height: 419.111px;">
<td style="height: 419.111px; width: 632.052px;"><iframe src="https://danes-online.dk/Indskoling/Forside/0.html" width="1600" height="550"></iframe></td>
</tr>
</tbody>
</table>


<p><iframe src="https://danes-online.dk/Indskoling/Forside/0.html" width="900" height="800"></iframe></p>

Using a table, you can lock the width/height of the iframe within a table. 

Using the second solution (width="900", height="800") we get an iframe that scales. Note that width, in this case, only determines the max width of the iframe, not the actual size (as Canvas scales it down). Height works differently - it is always max size - see this image, where width scales down but height remains the same (leaving a lot of white space that is visible when marking the area):

https://danes-online.dk/Screen%20Shot%202017-09-28%20at%2009.54.00.png

I do not understand this, but I recall that this is how Canvas used to work with iframes and maybe they've pushed an update to allow this again. This thread started when this stopped working and Canvas began overriding width/height settings of iframes.

 

Hope this analysis was helpful. It may be more useful to ignore previous replies in this thread because I'm pretty sure Canvas is behaving differently than when this begun.

Gosh, I must have something special going on with how Canvas runs for me. I've found that making Pages works just fine but making Assignments results in the tiny container issue.

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)