Display entire contents of an iframe without scrolling
I want to display the entire contents of the iframe so that there is only the default browser scroll bar. I can not seem to get rid of the iframe verticle scroll bar. Any suggestions?
Hi, your code is working I can see vertical scroll bar in chrome,IE and Firefox So what is the problem with you ?
I do not want the scroll bar. I want the entire contents of the iframe to show up that I can see with the browser scroll.
@SarangaR are you in control of the iframe source? Each image in that googleDocs link has overflow: hidden . My demo shows an iframe with a normal page for src plnkr.co/edit/EFP750Fth4PTutwdK56Y?p=preview
I have added the code here so you can see what the problem is more clearly. plnkr.co/edit/rU6BIcKUkTzFksTuneuh?p=streamer The height of the document is dynamic and I want the div and iframe to expand to the height of the google document in the iframe so that no inner scroll is needed. Thank you
How to remove the scroll bar from iframe?
I used iframe for delivering an image icon for the pdf links in an html page. I have tried using overflow:hidden, scrolling: «no» etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this. Here is the complete code:
/* one */ .imagewrap < display: inline-block; position: relative; >.icon-remove-sign < position: absolute; top: 0; right: 0; >iframe
Remove scrollbar from iframe
This is how it appears (the shoutbox on homepage of http://www.talkjesus.com) How do I remove the horizontal scrollbar and modify the css of the vertical scrollbar?
18 Answers 18
Add scrolling="no" attribute to the iframe.
@MikePoole It might be officially obsolete, but it didn't help setting overflow:hidden; on Chrome 65.0.3325.181, but scrolling="no" helped.
This removed the scroll bar for me, but W3C Nu Html Checker now reports The scrolling attribute on the iframe element is obsolete.
This works in all browsers
Adding scroll="no" and style="overflow:hidden" on iframe didn't work, I had to add style="overflow:hidden" on body of html document loaded inside iframe.
If this helps, there is an issue in Firefox, where if you have an element CSS transform: scale(0.7) or such, this will create scrollbars (which will show up in your iFrame), unless you clip it with overflow: hidden; on an ancestor (could be a div instead of body).
loaded inside
Try adding scrolling="no" attribute like below:
seamless attribute has been removed in all major browsers
Just Add scrolling="no" and seamless="seamless" attributes to iframe tag. like this:-
1. XHTML => scrolling="no" 2. HTML5 => seamless="seamless"
If anyone here is having a problem with disabling scrollbars on the iframe , it could be because the iframe's content has scrollbars on elements below the html element!
Some layouts set html and body to 100% height, and use a #wrapper div with overflow: auto; (or scroll ), thereby moving the scrolling to the #wrapper element.
In such a case, nothing you do will prevent the scrollbars from showing up except editing the other page's content.
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start">Share)" title="">Improve this answer)">edited Sep 25, 2013 at 6:40 Kamil Budziewski22.7k14 gold badges85 silver badges105 bronze badgesanswered Sep 25, 2013 at 6:17 KnightFuryKnightFury1091 silver badge1 bronze badge
