Menu
I have an embedded iframe that has been created publishing a google doc.
The iframe automatically applies a large padding to its body resulting in the text being a very narrow and ugly column. I have to change that.
I have tried to create a custom directive:
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");
// -> grabbedElement is null here
});
}
}}]);
which is applied to:
<iframe iframe-with-style
src="https://docs.google.com/document/d/somethingABC123/pub?embedded=true">
</iframe>
but iframe.querySelector returns null and iframe.contentWindow.document results, as expected, in
Uncaught DOMException: Blocked a frame with origin "http://localhost:8100" from accessing a cross-origin frame.
I have looked at a workaround but I have a feeling that it's overkill (ex: safe cross-communication with messages).
I tried to fight the padding with some css applied to what I can reach. For example:
iframe {
padding: 0px !important;
margin-left: -50px;
margin-right: 50px;
}
css applied to the body of the iframe seems to be simply ignored.
Once upon a time there were some convenience attributes, such as marginwidth. Tried that too.
I was also wondering if google does not offer some "sugar" but googling around did not help.
Note: it really does not have to be an iframe, 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.
Adding a plunker: https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview
242
Embedding iFrames from Google Docs or Google Sheets 1. Copy the Google Doc or Sheets link from the URL bar. 2. Start a new iFrame block in the Card.
Unfortunately, Android doesn't allow its users to change their margins in Google Docs. However, you can make many other changes to your Google Docs files on an Android device to adjust the look of your documents. For instance, you can modify the page color, size, or orientation using your Android phone.
Change the last portion of your url from true to false.
https://docs.google.com/document/d/1s2nOQZ39dKD-hsmox5twmmKKkuXzOopT1eXFbMh5DeE/pub?embedded=false
The demo includes use of all of the embedded elements:
<iframe>, <embed>, and <object>
When you set embedded=true Google server will add a class named .c1 to the <body> of the content inside the <iframe>
.c1 { background-color: rgb(255, 255, 255); max-width: 468pt; padding: 72pt 72pt 72pt 72pt; }
That's just plain reckless of Google if you ask me. I suggest that you set padding on the content itself and set embedded=false.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
