iFrame Resizing - Qualtrics

Jump to solution
mchild76
Community Contributor

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