[ARCHIVED] How do you change the size of an embedded Google Doc?

[taylor_hall]

You used to be able to drag and make Google Docs larger, but in the past 4-6 months it changed and you are no longer able to do that in the rich content editor. Now you have to use HTML and guess what size you want the document. Why is it not working any longer?

[Robbie_Grant · Accepted solution]

 @thall39 r,

Can you get at the HTML? You need to put a width and height on the <iframe>. 

<iframe width=600 height=500 src=......>

Robbie

[Stef_retired · Accepted solution]

I have never seen that happen,  @rmerrill ‌. Please check out Using Google Docs for dynamic Canvas content‌ for additional discussion of how to embed Google Docs in a Canvas page.

[Robbie_Grant · Accepted solution]

 @thall39 r,

Can you get at the HTML? You need to put a width and height on the <iframe>. 

<iframe width=600 height=500 src=......>

Robbie

[taylor_hall]

That's all I found that works. But when you have multiple items embedded it gets really tough. I also have more knowledge than many in my building about computers, so the majority of people would not be okay with this. Dragging though is easier. We used to be able to do this.

[rmerrill]

Yes, you can change the size, but then you have changed the address and the "embedded" document no longer automatically updates when you make changes to the file.  That is a pain.  Then you must re-embed the document..

[Stef_retired · Accepted solution]

I have never seen that happen,  @rmerrill ‌. Please check out Using Google Docs for dynamic Canvas content‌ for additional discussion of how to embed Google Docs in a Canvas page.

[taylor_hall]

That still doesn't address the issue of how the HTML code changes the sizing each time you add something.

Just providing a shared link to the document does work, but it provides everything including the notes section if linking a Google Slide. It is a really clunky error that is still happening when less than a year ago we could drag embedded objects to change the size.

Taylor Hall

6th grade Humanities and Writing

[Stef_retired]

 @taylor_hall ‌, I was addressing  @rmerrill ‌'s comment about having to re-embed documents; I can't speak to the change about dragging embedded objects, as it's not something I encountered or know about.  I can see how this could present an obstacle to those who are wary of the HTML Editor.

[rmerrill]

I sort of feel like you are doubting what happened. So I will tell you that I have already embedded google slides multiple times with no problem.  When I embed a Google doc, it gives a super tiny screen like your blog post said, "Ugh". So I changed the numbers in the HTML code and got a viewing window that was appropriate, but then my updates to the original document would NOT show up on the Canvas embedded document. I kept refreshing the screen. But nothing changed until I re-embedded the document. I didn't see anything in your post you referenced that would help this.  Did I miss something?

[Stef_retired]

 @rmerrill , I'm sorry you got the impression I'm doubting what happened, as I absolutely did not mean to convey that sentiment at all;  rather (and I hope this is stated more eloquently), what you've reported here is brand-new behavior that I have not heretofore encountered, and commented in the hope that we can work toward a remedy. Have you asked Canvas Support to look into this?

[rmerrill]

I'm actually pretty new to this whole Canvas support thing.  How do I ask Canvas support to look into it?

[kmeeusen]

Hi  @rmerrill ‌

Click the Help menu item in account navigation, the choose "Report a Problem".

I hope this helps,

Kelley

[kjohn113]

I've been reading this thread and I have used Stefanie Sanders' very helpful tip on embedding dynamic content from Google Docs in Canvas, but now I just want to embed my course calendar-  something I don't want students to be able to edit.  When I use the embed code (and not the share link), the table comes out with narrower columns and in a frame that does not support its size without side scrolling and up/down scrolling.

If I insert width="100%" height="1000px" between (...)/pub?embedded=true"> and </iframe></p>, as suggested elsewhere, the sizing does not change.

Any idea what the best way to just have the document appear, without the Google Doc editing tools showing, and more crucially, such that the document is un-editable by students?

[don_bryn]

I don't know if this helps, but I embed a few google docs in my Canvas pages and the only way I know how to do it is by embedding an iframe.   You get the code from the "share" function in Google Docs.   But the way I frames work is that you HAVE to specify the width and height as it can't be calculated in real-time.  That's the one big drawback to any iframe. 

Once you have pasted that code (in the HTML editor always), you should be able to see a blanked-out box the exact size that your iframe will take, though the content will not load until you save the edit.

Because the Canvas page is reloading the iframe every time you refresh that page, you should see any changes made to the google doc.

I'm not sure I understood your question, but I hope that helps.

[emily]

There was an update recently (summer 2017) that caused this change in behavior. As far as I know, the only way to resize iframes now is to change the HTML code for height and width. 

[don_bryn]

I think you might be referring to changing the size of text-boxes on the fly.   This is possible in Canvas (probably via jQuery), but I don't think it's every been possible with an iframe.  I don't think it's every been done in any scripting environment on a webpage simply because of the basic way iframes work in HTML.  Could you possibly be confusing input or viewing text-boxes with iframes?

[taylor_hall]

No. You used to be able to adjust iframes in the rich content side. Canvas changed this at some point around June. Changing back would be great.

Taylor Hall

6th grade Humanities and Writing

[don_bryn]

Taylor, I'm sorry--I misunderstood your question.  I thought you were referring to viewing an iframe, but you were referring to editing an iframe.   Sorry for the mixup.

[Robbie_Grant]

 @taylor_hall ,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie

[rislis]

I don't see this issue as being solved. There is no width height to adjust.

[ajonker · Accepted solution]

After playing around with this for awhile, this is what I have found. Adding the height and width code does work, but it takes a LONG time for changes to show up. To make changes show up automatically, I had to go about it in an entirely different way.

Instead of publishing, I embedded it as if it were a video (and then changed the html code). It takes more steps, but I ended up liking the result a lot more (and for more reasons than just the automatic updates). See below for the steps. 

1. Get the share link from the google doc

2. On Canvas Page, click to insert media

3. Paste the share link, but change the last part of the link 
CHANGE /edit?usp=sharing TO  /preview?pli=1
*Note = this is what puts the document into preview mode and show up on the page correctly

4. Change the dimensions
*Note = I recommend width = 100% Height = 600

5. Click Okay

6. Click HTML Editor

7. Adjust code 
change video to iframe, delete controls, extra bracket, and source
*Note = The document will not show up without these changes

Example:

CHANGE 

<p><video width="100%" height="600" controls="controls">
<source src="https://yourgoogledocshareaddress/preview?pli=1" /></video></p>

TO

<p><iframe width="100%" height="600" src="https://yourgoogledocshareaddress/preview?pli=1" /></iframe></p>

8. Save

[awilliams]

 @ajonker  Welcome to the Community and way to make a splash entrance! This is some very helpful information. Thank you for taking the time to create an account and share what you have learned!

[cregini]

Alisha, this was an amazing and very clear set of instructions.  Thank you so much. We are making a switch from Google Classroom to Canvas in my district and I am trying to figure out the best way to integrate all of the materials I have already created in my Google Suite.  Do you have any tips about how to best share Google Docs that students can make their own copy of and edit as their notes?  I have been running a paperless classroom for years and want to keep it as streamline as possible.  Cheers!  Chris

[ajonker]

Chris - I am so sorry that I have not replied until now! I am sure you have found the answer by now, but I do this in one of two ways:

1. Insert the document's "copy" link directly into the module or canvas page. 

This is the primary way that I share with students when they need their own copy. I just find it easier. 

2. You can also add it by using the LTI integration.

This loads a student copy directly on an assignment page for students to complete and submit. 

[pulley]

Alisha, thanks, that worked, but OMG. Hadn't use my Canvas account in a couple of years since I was testing several LMSs and our school chose another. I made homepages in Canvas that I actually copied from to make pages in the LMS we chose because the editing was easier...not the case any longer.

[zenmarc]

To check what is the current max upload size limit in your WordPress site then navigate to WP Admin → Media → Add New. You will see the current max upload size on the bottom as shown in the screenshot. If the current max upload size limit meets your demand then you can leave it as it is. However, if it doesn’t then don’t fret, there are many ways you can Increase Media File Maximum Upload Size.

[rawkward]

I know this is an old post, but in case anyone else finds it like I did, check out this Quora article, it saved me!

https://www.quora.com/How-do-you-change-the-size-of-an-embedded-Google-Docs-document

[TerriFried]

Does anyone know if you can change the html code in the actual google doc to adjust width and height?  That way, when we make changes to the original it automatically updates and keeps the width and height the way we want it?