[ARCHIVED] I'm embedding a published google doc onto a page. How can I get the published google doc to fit the width of the iframe?

[karl_sain]

No matter what width and height I add to the embed code, the published google doc seems to have a width that does not fill out and match the iframe.  Below is a screenshot.  You can see that the desired width of the iframe is the gray box below, but the published google doc is much skinnier than the iframe (see gray box).  Below the image you can see my embed code.

<iframe src="https://docs.google.com/document/d/e/2PACX-1vTf0SqZhhUF9_70OHPQ-LuU6pFhB4XDc3UDZb1TBdWTG9OjlypceXW02..." width="100%" height="400" allowfullscreen="allowfullscreen"></iframe>

[rpsimon]

Hi  @karl_sain  and welcome to the Canvas Community!  I had the same exact issue almost a year ago, so I figured I would share the advice that I received from Canvas Standard Support with you.  Hope this helps.

Hi Rebecca,

Thank you for contacting Canvas Support! I apologize you are having trouble with view of a document in your course. What you will want to do to adjust the size with HTML. You will go to the page and then click "edit", go to "HTML editor". 

This will be the code you edit:
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQjK_t81y-ueaLROz4BYFV0T94cA0DGE_UJEeQsoYg3T6k9z5D4ODak2..."
You will need to insert the code width=(insert width) followed by height=(insert height)>

Here is an example you can use with the code
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQjK_t81y-ueaLROz4BYFV0T94cA0DGE_UJEeQsoYg3T6k9z5D4ODak2..." width=200 height=200>

Please let me know if this works and if you have anymore questions!

Please reply if you have any additional questions.

[karl_sain]

Thanks for the reply Rebecca!  Unfortunately I've already accounted for that.  As shown in the screenshot, the iframe is the correct width, but the published google doc is only using the middle portion of the iframe.  See the gray box at the bottom of the screenshot to see the desired width, but the the text and tables in my document do not utilize the full width that the gray bar does.  

Here's the current HTML that I"m using that achieved that screenshot:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vTf0SqZhhUF9_70OHPQ-LuU6pFhB4XDc3UDZb1TBdWTG9OjlypceXW02..." width="100%" height="400" allowfullscreen="allowfullscreen"></iframe>

[rpsimon]

Sorry about that,  @karl_sain ‌.  At this point, I think you should contact Canvas Standard Support directly either by the Service Cloud or calling them if you have access to that.  I wish I could be of more help.

[mshorrell]

I've been having this same issue- it's so annoying!! I'm pretty sure it's an issue with Google Docs, though, not with Canvas. When I paste the "publish" link into the browser and just look at that, it has the same issue- it's like the margins get really big and everything squishes to the middle. It always messes with my formatting! 😞 I might look into the Google Docs support and see what I can find.

[ahenschel]

@mshorrell did you ever figure out this problem?

[Chris_Hofer]

Hey there, Angela (@ahenschel) ...

If you are also having issues with the Google integration, you can e-mail us at our LMS account at MPTC, and we can try and work with you...however, keep in mind that since we are a Microsoft school, you would probably be able to accomplish something similar with the O365 integration that we have set up with Canvas.  Just let us know if we can be of help...thanks!

Chris