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

iFrame Resizing - Qualtrics

Jump to solution

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

239038_pastedImage_1.png

<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:

239066_pastedImage_2.png

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

1 Solution

Accepted Solutions
Shar
Community Champion

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.

iframe set size width 720 and width 100%

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


View solution in original post

4 Replies
Stefanie
Community Team
Community Team

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

mchild76
Community Contributor

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

laurakgibbs
Community Champion

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

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.

iframe set size width 720 and width 100%

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


View solution in original post