cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Learner

Scaling an iFrame dynamically

Jump to solution

Hello Canvas community,

We have an HTML, CSS and JS-based expandable fact-box that basically expands on click and reveals a block of text vertically. 

The only option for integrating this into Canvas is through an HTML iframe, but the problem is that the width and height of an iframe is predefined and so the text-block revealed can only be reached by scrolling inside the iframe once revealed (which defeats the point of even having an expandable fact-box). On a regular webpage, the revealed content of the fact-box would simply push other elements below it down. This is what I want to achieve inside Canvas' HTML editor.

Does anyone know of a way to make an iframe follow the size of its content dynamically inside Canvas? I've tried a few things, but Canvas auto-formats the most common fixes out of the iframe HTML syntax.

1 Solution

Accepted Solutions
Highlighted
Lamplighter II

Hello michael@danes.dk‌,

I have a different take on your problem; instead of using an iframe to display the Fact box content, use a Toggler element to make it display on the Canvas page itself. This method will work well if the content is not meant to be changed often because it's part of the content of the page. I use this method to add interactive bits to pages with content that novice users would find helpful but that would otherwise not be needed after you've viewed it the first time.

Here are a few screenshots:

Toggler button to display factbox

The top image is the page with the box collapsed, and the bottom image shows what happens when you click the button.

Here's the (Canvas Android app) mobile view that same page, note that you cannot make that box appear, and even the button is unstyled.

mobile view of toggler fact box

Here's the code:

<p class="text-center"><span class="element_toggler btn" title="FactBox" role="button" aria-controls="box1" aria-label="Toggler for FactBox1" aria-expanded="false"><i class="icon-question"></i> FactBox: Did you know?</span></p>

<div id="box1" class="border-round" style="border:thin solid blue; display: none;">
Factbox info here
</div>

And it was adapted from Styleguide collapsible content code. If you'll have more than one of these boxes on the same page, it's important to change box1 for each successive box. And while editing make display:auto instead of none so you can see what it looks like in the RCE.

It's not the solution to your dynamic adjustable iframe, but this toggle-box is how I would implement an expandable fact-box.

Cheers - Shar

View solution in original post

7 Replies
Highlighted
Community Coach
Community Coach

michael@danes.dk,

I shared your question with the https://community.canvaslms.com/groups/designers?sr=search&searchId=305544d7-6c1d-4d5e-ae6e-00d0abce...‌ group as they may have some suggestions for you as well.  I also thought about the https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=bd51aed7-24a3-43e5-8b8c-...‌ group, but I am not sure that is the right place for this, although it probably wouldn't hurt to ask them.

Robbie

Highlighted
Community Member

I am curious what insight people might have here. I mainly use iframes for randomizing widgets that have variable height; I can control pretty easily for width, but the height variable is what's a real problem for me in order to avoid scrolling but without ridiculous amounts of white space. I wonder if there is any magic that will help...

Highlighted
Lamplighter II

Hello michael@danes.dk‌,

I have a different take on your problem; instead of using an iframe to display the Fact box content, use a Toggler element to make it display on the Canvas page itself. This method will work well if the content is not meant to be changed often because it's part of the content of the page. I use this method to add interactive bits to pages with content that novice users would find helpful but that would otherwise not be needed after you've viewed it the first time.

Here are a few screenshots:

Toggler button to display factbox

The top image is the page with the box collapsed, and the bottom image shows what happens when you click the button.

Here's the (Canvas Android app) mobile view that same page, note that you cannot make that box appear, and even the button is unstyled.

mobile view of toggler fact box

Here's the code:

<p class="text-center"><span class="element_toggler btn" title="FactBox" role="button" aria-controls="box1" aria-label="Toggler for FactBox1" aria-expanded="false"><i class="icon-question"></i> FactBox: Did you know?</span></p>

<div id="box1" class="border-round" style="border:thin solid blue; display: none;">
Factbox info here
</div>

And it was adapted from Styleguide collapsible content code. If you'll have more than one of these boxes on the same page, it's important to change box1 for each successive box. And while editing make display:auto instead of none so you can see what it looks like in the RCE.

It's not the solution to your dynamic adjustable iframe, but this toggle-box is how I would implement an expandable fact-box.

Cheers - Shar

View solution in original post

Highlighted
Lamplighter II

Here's another variation of the toggle reveal code:

<p><span class="element_toggler" role="button" aria-controls="group_2" aria-label="Toggler toggle list visibility" aria-expanded="false"> <a class="icon-info"> More Instructions on Responding</a> </span></p>

<div id="group_2" class="content-box" style="display: none;">

<p>Hidden Content</p>

</div>

Taken from a discussion about HTML button toggle content. And it still does not display in the mobile app or as an active link.

Good luck - Shar

Highlighted

Ooooooh, that looks really cool, ishar-uw‌! Thank you for sharing all the details here. 🙂

P.S. I am using more CSS in the widgets I am building now, and it is really helping me with being able to let the widgets stand more on their own. 🙂

Highlighted

Awesome, Sharmaine! That seems to be the best solution. I'll restyle it and use it.

Thanks. 🙂

Highlighted
Community Advocate
Community Advocate

What a brilliant suggestion. We have used it for our FAQ page to help staff with Network Drive changes:

238426_pastedImage_1.png

Also works really well when adding in an image into the 'reveal' section:

241927_pastedImage_1.png

Many thanks for being so supportive of the community Sharmaine