Adjusting margins in embedded Google Docs iframe

Other Questions Google docs
1

I’m working with an embedded iframe containing a published Google document. The iframe adds excessive margins around the content, making the text appear in a very thin column that looks terrible.

I created a custom directive to fix this:

app.directive('documentFrame', [function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attrs){
      elem.on('load', function(){
        var frame = elem[0];
        var bodyElement = frame.querySelector("body");
        // -> bodyElement returns null
      });
    }
  }]);

Used with this HTML:

<iframe document-frame
        src="https://docs.google.com/document/d/exampleXYZ789/pub?embedded=true">
</iframe>

However, frame.querySelector returns null and accessing frame.contentWindow.document throws a cross-origin error.

I tried CSS workarounds:

iframe {
  padding: 0 !important;
  margin-left: -30px;
  margin-right: 30px;
}

But CSS targeting the iframe’s body content gets ignored. I also tried the old marginwidth attribute without success.

Is there a way to reduce this padding without complex cross-origin messaging? The iframe doesn’t have to be the solution, I just need the Google Doc content to display properly with less whitespace.

2

cross-origin embedding is such a headache. try adding &width=800 (or whatever width works) to your google docs url. there’s also single=true that can fix spacing issues. both worked when i dealt with this last month, but your mileage may vary.

3

I’ve dealt with this same headache across several projects. Here’s what actually works: ditch the iframe completely. Change your URL to /export?format=pdf&portrait=true and embed the PDF with an object tag or PDF.js viewer. Way cleaner margins, zero cross-origin drama. Or go with /export?format=html - you get raw HTML you can style however you want. No iframe headaches. The HTML export dumps Google’s messy default styling, so you control spacing and layout. Takes 10 minutes to set up, saves you hours of iframe debugging hell.

4

Hit this same problem last year on a client project. You can’t manipulate iframe content with JavaScript because of cross-origin restrictions - that’s why querySelector won’t work. Here’s what fixed it for me: ditch the embed parameter and use Google’s publishing method instead. Change “/pub?embedded=true” to “/pub?output=html” in your iframe src. This kills most of the Google Docs UI and shrinks those default margins way down. Still need more layout control? Use the Google Docs API to grab the content and render it yourself. More work upfront, but you get complete styling control. The API exports docs as HTML that you can style however you want - no iframe headaches.