Resizing content pane

Jump to solution
ColinDavis
Community Member

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)

0 Likes
1 Solution
JeffCampbell
Community Coach
Community Coach

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.

View solution in original post