title: google docs iframe - change padding
body: <p>I have an embedded <code>iframe</code> that has been created publishing a google doc.
  The <code>iframe</code> automatically applies a large padding to its <code>body</code> resulting in the text being a very narrow and ugly column. I have to change that.</p>
  
  <p>I have tried to create a custom directive:</p>
  
  <pre><code>app.directive('iframeWithStyle', [function(){
  return {
      restrict: 'A',
      link: function(scope, element, attrs){
          element.on('load', function(){
                 var iframe = element[0];
                 var grabbedElement = iframe.querySelector("body");
                 // -&gt; grabbedElement is null here
          });
      }
  }}]);
  </code></pre>
  
  <p>which is applied to:</p>
  
  <pre><code>&lt;iframe iframe-with-style
          src="https://docs.google.com/document/d/somethingABC123/pub?embedded=true"&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>but <code>iframe.querySelector</code> returns <code>null</code> and <code>iframe.contentWindow.document</code> results, <a href="https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe">as expected</a>, in </p>
  
  <blockquote>
    <p>Uncaught DOMException: Blocked a frame with origin
    "<a href="http://localhost:8100" rel="noreferrer">http://localhost:8100</a>" from accessing a cross-origin frame.</p>
  </blockquote>
  
  <p>I have looked at a workaround but I have a feeling that it's overkill (ex: <a href="https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame/25098153#25098153">safe cross-communication with messages</a>).</p>
  
  <p>I tried to fight the padding with some css applied to what I can reach.
  For example:</p>
  
  <pre><code>iframe {
    padding: 0px !important;
    margin-left: -50px;
    margin-right: 50px;
  }
  </code></pre>
  
  <p>css applied to the <code>body</code> of the <code>iframe</code> seems to be simply ignored.</p>
  
  <p>Once upon a time there were some convenience attributes, such as <a href="https://www.w3schools.com/tags/tag_iframe.asp" rel="noreferrer"><code>marginwidth</code></a>. Tried that too. 
  I was also wondering if google does not offer some "sugar" but googling around did not help.</p>
  
  <p>Note: it really does not have to be an <code>iframe</code>, but I need to show that formatted gdoc within the app in a way that it is readable; and for that I need to reduce that padding.</p>
  
  <hr>
  
  <p>Adding a plunker: <a href="https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview" rel="noreferrer">https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview</a></p>