[ARCHIVED] iFrame Resizing - Qualtrics

[mchild76]

We are working on a course which uses Qualtrics surveys as a discussion stem. We have done this before with success:

<p><iframe style="overflow: hidden; display: block; margin-left: auto; margin-right: auto;" src="https://maryville.az1.qualtrics.com/SE/?SID=SV_8qPEUWq9bDO4pw1"></iframe></p>

Today, as my colleague is working, this is happening:

<p><iframe style="overflow: hidden; display: block; margin-left: auto; margin-right: auto;" src="https://maryville.az1.qualtrics.com/SE/?SID=SV_8qPEUWq9bDO4pw1"></iframe></p>

Note the tiny, tiny frame. 

We have worked with the code quite a bit, but anytime we attempt to add height or width parameters they disappear. Meaning, we enter a code similar to the following:

<iframe style="overflow: hidden;" src="https://learn.maryville.edu/courses/12240/files/2097490/download" width="500px" height="350px" data-api-endpoint="https://learn.maryville.edu/api/v1/courses/12240/files/2097490" data-api-returntype="File"></iframe>

Then, when we save changes or flip back to the Rich Content Editor, this happens:

<p><iframe style="overflow: hidden;" src="https://learn.maryville.edu/courses/12240/files/2097490/download" data-api-endpoint="https://learn.maryville.edu/api/v1/courses/12240/files/2097490" data-api-returntype="File"></iframe></p>

Any thoughts or suggestions are appreciated.

[Stef_retired]

mchild76‌, have you tried putting in 100% for the width instead of a pixel value?

[mchild76]

Yes, we've tried all sorts of combinations this afternoon. It's been quite the puzzle

[laurakgibbs]

I think this might be related to a problem with a CSS fix here:

https://community.canvaslms.com/thread/16978-iframe-issues-reverts-to-300x150 

That's what it looks like just at a quick glance, mchild76‌ ... maybe the fix someone found for that will work for your Qualtrics problem here.

[Shar · Accepted solution]

Absolutely as Laura pointed to the iframe reverts to 300x150 discussion, you'll have to add some style to how you want the iframe to display. But why change from the original code with the qualtrics src? I had success setting the width and height on the original link.

I added borders around the iframe just to be sure where the limits were.

In the first image I set the width and height directly and it kept in place.
<p><iframe style="padding: 0px; border: 1px solid #464646;" src="https://maryville.az1.qualtrics.com/jfe/form/SV_8qPEUWq9bDO4pw1" width="720" height="405" allowfullscreen="allowfullscreen"></iframe></p>

In the second image, I set the width in the style parameter to 100% and you can see that it overrules the regular width="500":

<p><iframe style="width: 100%; border: thin solid green;" src="https://maryville.az1.qualtrics.com/jfe/form/SV_8qPEUWq9bDO4pw1" width="500" height="350"></iframe></p>

Stick with the direct link out if you can, and use the inline CSS to set the width. When I don't set the width/height Canvas will automatically fill in the 300/150 as in your original code:
<p><iframe style="overflow: hidden; display: block; margin-left: auto; margin-right: auto;" src="https://maryville.az1.qualtrics.com/SE/?SID=SV_8qPEUWq9bDO4pw1" width="300" height="150"></iframe></p>

Good luck,
Cheers - Shar