Showing results for 
Search instead for 
Did you mean: 
Community Member

Dynamically resizing iframes in Canvas

I am trying to dynamically size iframes in canvas. I can size the width by setting it to 'width=100%' but it does not allow me to dynamically size the height, which means any time we update the iframe, we have to go to each location and manually change the height for each one. For Moodle and Blackboard, I am able to use the iframeResizer.js found here: GitHub - davidjbradshaw/iframe-resizer: Keep same and cross domain iFrames sized to their content wi... 

However it appears that it is unsupported in Canvas. Is there another solution for dynamically sizing height for iframes in Canvas?

Tags (2)
12 Replies
Community Coach
Community Coach

jordan.roose, I’m not sure if the answer to your question, but I’ve shared it with the Instructional Designers‌ and Canvas Developers‌ groups in the Community to see if they can help!


Surveyor II

As well, in experimenting with iframes, if you have content that changes height as you adjust the width of a window, an extra scrollbar appears. Still experimenting...

As it turned out, I gave up on using an <iframe>. I was trying to customize a vocabulary/glossary list using <dl> list, and customizing the CSS necessary for the list to be formatted as I wanted. As I mentioned above, the lack of a responsive way to size the iframe based on the content and size of the window just looked bad. I ended up using a script-generated <table> with CSS styling applied to each tag.

Explorer III

I just created a feature request / Canvas idea that has the potential to solve this. I believe that if we can take advantage of a feature that is already in the Canvas LTI API, we might be able to create dynamically resizing iframes. The feature involves adding a small bit of javascript code in our iframed HTML files to post a message to Canvas that suggests an iframe height to be used.

Here's a link to that request:

 @dslusser ‌ we're facing these challenges using Resource Links for LTI Deep Linking.  Ideally we would like to be able to set the width of the iframe to 100% and then dynamically resize the iframe height to the content as it changes.  For example, when a viewer changes the orientation of their device (e.g. an iPad, Tablet, Phone, etc) then the width will automatically fit and the height could be updated.  We're already doing this in Moodle and D2L Brightspace but not via LTI Deep Linking.  In Moodle we have our own plugin and in Brightspace we're using their Insert Stuff feature.  To achieve this on both platforms we're using the iFrame Resizer library. 

Some time ago there was a solution for height resizing released by Instructure however it would seem it is no longer supported.  Something similar to this would be very useful.

On the width, I'm aware that IMS Global have specified that widths are integers however it would help immensely if percentages were allowed. 

Quick update, the resizing solution still exists but only gets included when an LTI launch is triggered by clicking on a placement link.  It does not however get included when LTI Deep Linking Resource Links are displayed on page content.  It would be good if it could be included so we can resize LTI Deep Linking Resource Links.

Community Coach
Community Coach

Hi there, jordan.roose...

I am reviewing some of the older questions here in the Community, and I stumbled upon your question.  I wanted to check in with you because I notice that we have not heard back from you since you first posted your question on December 12, 2018.  I see that you've received some replies from  @kona ,  @rlong , and  @dslusser .  Do you feel that any of the feedback you've received from them has helped to answer your question?  If so, please feel free to click the "Mark Correct" button next to one of those replies.  However, if you are still looking for some help with your original question, please post a note below letting us know how we might be able to help you here in the Community.  For the time being, I am going to mark your question as "Assumed Answered" because we haven't heard back from you and because there hasn't been any new activity in this topic for almost four months.  However, that wont' prevent you or others from posting additional questions and/or comments below that are related to this topic.  I hope that's okay with you, Jordan.  Looking forward to hearing back from you soon.

I'm not sure we can quite consider this solved despite the lack of engagement on the thread. I feel like it's more of a "Canvas, please help me, we need a solution to this" issue. With that said, this pretty much looks like a dead end right now :-/.

Surveyor II

I am finding myself in this same situation. Is there any update to this? We want to show an LTI at full screen on a page through the editor placement, but 100% height is only a few hundred pixels high. My guess is it is the min height for the iframe.

We can set the iframe to a fixed pixel height, but that is not responsive to the size of the user's screen

Tags (1)