SCORM content display is cut off - how to fix?

[epulham]

Hi everyone,

I have some great SCORM OER content from wisc-online.com for our Medical Assisting program. My problem is that when I upload it to Canvas, it displays like this:

As you can imagine, this is not user-friendly. I have been TRYING to fix the CSS and HTML on the back end to get it to upload and simply show all of the content in the viewport, but I've had no luck. I'm a little bit more than a novice with HTML and CSS, but this has proved to stump me. And it's doubly hard when I have to re-upload to Canvas every time I want to check to see if a minor code change accomplished anything.... Are there any HTML/CSS gurus out there who are willing to help me? Or know of anyone who gets it and could help (stefaniesanders or  @kona ) ? Here's the source code for the HTML and CSS:

HTML: 

CSS:

[kona]

 @epulham , unfortunately this goes beyond my area of expertise. I have however shared this with a couple of groups to see if we can get more eyes on this and hopefully figure out a solution to the problem!

Kona

[epulham]

Thank you, Kona! I just want to cast a wide net, there's got to be someone

around who can see what I'm doing wrong.

[themidiman]

 @epulham , I would be happy to take a look at it if I had access to a Canvas shell with the content in it. That allows me to see the developer tools and play with the CSS. Maybe you could email me offline about that or provide a Canvas export package that has a sample of the issue so I can import it into a sandbox area in an instance of Canvas that I have access to.

[epulham]

I will e-mail you! Thank you so much.

[epulham · Accepted solution]

The fix Jeffrey was able to help me come up was a min-height attribute for the iframe of 800px! Just for future reference if anyone is looking for help with this issue. 

[themidiman]

Glad we got that figured out!

[Shar]

Hi Emily,

Yeah I was going to say just from looking at the snippet you posted, the iframe did not have any height or width attributes on it, so it was defaulting to the 150px. Eep!

Glad you got it figured out with the 800px!

Incidentally, here's a resource I found a few months back for responsive iframe pages: Responsive iframe - web page: Peter Wiarda Sandbox 

Cheers - Shar

[epulham]

Oh I love this. THANK YOU!