Resizing content pane

[ColinDavis]

When I add an external URL it opens within a content pane. The URL contains an interactive module, but the content pane is not large enough for the user to navigate the module without using the scroll bars. This is problematic. Is there a way to resize the content pane to fit the URL page, or resize the URL page to fit the content pane? (See attached pic)

[JeffCampbell · Accepted solution]

The way I have usually done this involves entering the HTML editor. The content likely is an "iFrame," so searching for that will help find the correct code. You are looking for a set of < and > brackets with a bunch of stuff inside. When you find it, there might be a width and/or height followed by "=###px" indicating the size in pixels. Change the ### part to lower it, then switch back out of the HTML editor for a quick check of the look.

Here is an example from one I have in my course that often requires some similar editing (it always seems to paste with a bunch of extra white space at the bottom of the content). I highlighted the part that I edit in bold blue.

<iframe id="d0c56517eecc4d4b97ef1877f9c52705" class="widget widget-flashcard" style="height: 325px;" src="wWEBLINK TO CONTENT" sandbox="allow-scripts allow-forms allow-same-origin" allow="geolocation; microphone; camera"></iframe>

It can be a bite time consuming at first to get used to what needs to be edited, but once you see how to do it, the process is not so bad. Even if your content is not an "iframe," the code for it more likely has a height or width component that you can change in the code.

If you have a lot of content on the page, there is a trick to make it a bit easier to find what you need in the HMTL code. Go right above or right below the embedded content. Using the editing menu, go to Insert and select Horizontal Line. When you go to the HTML Editor, just search for <hr>. That is the code for the line you added. Then look above or below that code to find the code for the embedded content (depending on whether you placed the line above or below it). When you are done adjusting height or width to what you want, make sure to delete the <hr> to get rid of the line altogether.

[ColinDavis]

Thank you! It was a little tricky finding the place in the code, but it worked!

[JeffCampbell]

Once you get used to it, the code is not as intimidating. I love the use of adding the horizontal line because it is such an easy thing to search for in the code. I did not think of this earlier, but when you are in the HTML editor, it usually defaults to a version Canvas calls the "Pretty HTML Editor." Searching for something using CTRL-F is trickier as it only searches for a handful of lines beyond the code currently visible in the editor. However, on the left side below the editor is a button to "Switch to raw HTML Editor." If you click on that button, then use CTRL-F, you will find the <hr> much faster as it scans the entire code instead of just what is visible.