andreallevin Posted June 28, 2016 Share Posted June 28, 2016 (edited) Hi there! I've tried everything ...I cannot figure out how to get my embedded google sheet to be responsive. Do any of you fancy coding types have any ideas? I would appreciate your help or even your empathy! <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true" width="100%" height="2000" frameborder="0" scrolling="no" padding="0" margin= "0"></iframe></div> http://www.ryeeducationfoundation.org (password: ref100) path grants>find your liaison Edited June 28, 2016 by andreallevin Initial Revision alxfyv 1 Link to comment
alxfyv Posted June 29, 2016 Share Posted June 29, 2016 Do not set attributes in the <iframe> tag, especially width and height. Do it in CSS. All that's needed in the <iframe> tag is the src= attribute. You will find all the HTML and CSS needed to have a responsive <iframe> in the pen Responsive Iframe - REF on CodePen. See the comments (comments button on the lower left) for further explanation. The <iframe> is responsive in that at narrower window sizes it scrolls horizontally. Put the HTML in an embed block. Put the CSS in Design > Custom CSS. Keep or discard the CSS general styles setting border, box-shadow, padding, etc. If you have questions, leave a comment. In any event, please let me know whether it works and satisfies your needs. -Steve Ad7am 1 I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
andreallevin Posted June 29, 2016 Author Share Posted June 29, 2016 Thank you so much for answering!! I can't wait to try this! Link to comment
andreallevin Posted June 29, 2016 Author Share Posted June 29, 2016 (edited) @alxfyv I think it works! Not sure if I did it right because the right side of the chart is cut off in desktop view but in mobile view you can easily drag and see the whole chart which is awesome! Should I change the width somewhere? You're so nice to help me out -- i've never had one of those codepen things written for me!! Edited June 29, 2016 by andreallevin Initial Revision Link to comment
andreallevin Posted June 29, 2016 Author Share Posted June 29, 2016 @alxfyv I think it works! Not sure if I did it right because the right side of the chart is cut off in desktop view but in mobile view you can easily drag and see the whole chart which is awesome! Should I change the width somewhere? You're so nice to help me out -- i've never had one of those codepen things written for me!! Link to comment
alxfyv Posted June 30, 2016 Share Posted June 30, 2016 I converted your "answer" to a comment which is where these remarks should go. I replied to that comment which is what you are reading now. I checked it out on my iPhone and iPad Air and it seems to be fine. Your are right though that it's not behaving correctly on the desktop/laptop. Let me investigate some and I will get back to you. In the meantime, just double check that you have the HTML correct in the embed block and the CSS correct in the Custom CSS. My suspicion is that there is something in the CSS that needs adjusting. -Steve I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
andreallevin Posted June 30, 2016 Author Share Posted June 30, 2016 (edited) Thank you for looking it to. It's really amazingly kind of you. And thank you for changing my response to to not a appear as an answer. I have so much to learn it seems -- even how to properly navigate Squarespace Answers! The code was just pasted in directly to a code block and in the css injection spot -- i did, as you said, removed some of the general styles like the border ... but that's the only thing I did. Edited June 30, 2016 by andreallevin Initial Revision Link to comment
Solution alxfyv Posted June 30, 2016 Solution Share Posted June 30, 2016 (edited) Put the following in the embed block: <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div> Put this in Custom CSS: #Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; } I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently. There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the <iframe> won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it. If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the <div id="Iframe-Liason-Sheet"> opening tag and add corresponding class rule sets in CSS. If you need help with further CSS or anything, let me know. In any case, let me know how it works. -Steve Edited June 30, 2016 by alxfyv typo I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
alxfyv Posted June 30, 2016 Share Posted June 30, 2016 It's my pleasure. :-) The pen was not a lot of work. I already had the base code which I developed when I needed an <iframe> for my site. All I did was fork it and change a few lines. I've given an answer below with the code so you don't have to use the pen. Use the code below and it should be fine. Let me know one way or the other. -Steve I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
andreallevin Posted June 30, 2016 Author Share Posted June 30, 2016 That fixed it! It works PERFECTLY. Thank you so much -- and I'm sure many will benefit from this awesome code. You're a good man!! Link to comment
alxfyv Posted June 30, 2016 Share Posted June 30, 2016 You're quite welcome. As I said, it's my pleasure. :-) I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward. Link to comment
lydonw Posted February 28, 2018 Share Posted February 28, 2018 I'm trying to use this as well, but am having two problems. The first is that any iframe I use actually has a 2000px height in desktop (which... not great) and it appears -webkit-overflow-scrolling is no longer standard, which may account for the fact that content within the frame cannot be scrolled through if it exceeds the bounds of the frame. I'm using this at lydonteaches.com/library (it's kind of hard to miss where, given the crazy height of the iframes!) I know it has been nearly two years, but I'm hoping someone can help. Link to comment
Guest Posted December 10, 2018 Share Posted December 10, 2018 Thank you, Steve, for sharing your time to help us. Finally, a solution! Lily Link to comment
carlylecapital Posted December 10, 2020 Share Posted December 10, 2020 On 6/29/2016 at 11:42 PM, alxfyv said: It's my pleasure. 🙂 The pen was not a lot of work. I already had the base code which I developed when I needed an <iframe> for my site. All I did was fork it and change a few lines. I've given an answer below with the code so you don't have to use the pen. Use the code below and it should be fine. Let me know one way or the other. -Steve @alxfyv Thank you so much for sharing! Do you by chance know how I can increase the width of the code you created? Link to comment
tuanphan Posted December 12, 2020 Share Posted December 12, 2020 On 12/11/2020 at 2:46 AM, carlylecapital said: @alxfyv Thank you so much for sharing! Do you by chance know how I can increase the width of the code you created? If you share link to page where you embed Google Sheet. We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
BRP Posted January 8, 2021 Share Posted January 8, 2021 On 6/29/2016 at 10:00 PM, alxfyv said: Put the following in the embed block: <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div> Put this in Custom CSS: #Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; } I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently. There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the <iframe> won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it. If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the <div id="Iframe-Liason-Sheet"> opening tag and add corresponding class rule sets in CSS. If you need help with further CSS or anything, let me know. In any case, let me know how it works. -Steve How would I do this an include multiple tabs of sheets? Link to comment
Beyondspace Posted January 8, 2021 Share Posted January 8, 2021 On 2/28/2018 at 10:55 PM, lydonw said: I'm trying to use this as well, but am having two problems. The first is that any iframe I use actually has a 2000px height in desktop (which... not great) and it appears -webkit-overflow-scrolling is no longer standard, which may account for the fact that content within the frame cannot be scrolled through if it exceeds the bounds of the frame. I'm using this at lydonteaches.com/library (it's kind of hard to miss where, given the crazy height of the iframes!) I know it has been nearly two years, but I'm hoping someone can help. it's 2 years later, haha, have you got it solved? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted January 8, 2021 Share Posted January 8, 2021 10 minutes ago, BRP said: How would I do this an include multiple tabs of sheets? In Spreadsheet File->Publish to the web you got option to select which sheet to be shared, repeat these several times to get the different link for different sheets tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted October 20, 2021 Share Posted October 20, 2021 After very long searching I found the solution here: https://wordpress.com/forums/topic/embedded-google-form-not-showing-in-post/?replies=2 change domain=”docs” to domain=”spreadsheets” Just replace one word in the code. After that you can set "scrolling: no" Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment