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?
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.
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).
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=...")).
4. Upon returning to the rich editor or saving, the iframe is resized to default (default meaning no (manual) width/height properties).
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.
@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.
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.
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. 🙂
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.
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)
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.
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).
Here's the HTML code for the 2 iframes, and this is where it gets really confusing.
<table style="width: 640.052px; float: left;">
<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>
<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):
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.