iframe inner scrollbar is stuck - html

I have a page that has an iframe in it. for styling, I'm using tailwind-css. Now I have two scrollbars - iframe inner scroll and browser'scroll, I want to hide the inner scrollbar of the iframe and scroll with the browser scrollbar. I tried to use scrolling="no" and the inner scrollbar is removed but the browser scroll is stuck and the iframe is not fully displayed
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
scrollbar="no">
</iframe>
</div>
Do you have any idea how can I do this? Thank you in advance

set the height to fit the content and disable the scrollbar
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
height="640px"
scrollbar="no">
</iframe>
</div>

Related

Does anyone know how to remove the board and scroll bar from this iframe embed code

Does anyone know how to remove a border and scroll bar from an iframe embed code from an embed.
Add these two attributes frameborder="0" scrolling="no" to your iframe tag
<iframe frameborder="0" scrolling="no" src="Your URL"></iframe>

Positioning iframe

So I have this iframe code that centers iframe content. It is working, but it stays on the top of the page, how could get it more down?
<h3 style="text-align:center;" >
<iframe src="http://88.90.5.113:12/customexportfile.htm" width="200"
height="100" frameBorder="0" ></iframe>
</h3>
Have you tried something like this: margin-top: 20px;?

How to add scrolling tollbar to the iframe with pdf

I have a modal with pdf:
<div ng-if="$root.isie11">
<iframe src="file.pdf" class="pdf">
</iframe>
</div>
<div ng-if="!$root.isie11">
<object data="file.pdf"
type='application/pdf' class="pdf" >
</object>
</div>
As you can see if browser is IE I use iframes in other cases object. In object the pdf comes with scrollbar. Althought its only 1 page its need to be scrollable because of a modal size. In Iframe there is no scrollBar.
I tried adding : scrolling: yes with now effects

How to reposition content in no scroll iframe?

I have an iframe for a google chart which has too much spacing around it. I want to embed this in my page but crop it to get rid of the surrounding space.
I was trying to do this by setting the iframe with smaller height and width attributes but I cannot work out how to reposition the content within the iframe to center it.
Here is the iframe for the chart:
<iframe width="550" height="170" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1r56MJc7DVUVSkQ-cYdonqdSGXh5x8nRum4dIGMN89j0/pubchart?oid=1407844401&format=interactive" onload="window.frames['itunes'].scrollTo(250,250)">></iframe>
How do you reposition the content of an iframe in this way or is there a better solution?
Thanks
You should wrap the iframe in a div or something and position the iframe.
here the code:
<div class="wrapper">
<iframe></iframe>
</div>
and this is the css
.wrapper{overflow:hidden;}
.wrapper iframe{position:relative; left:-40px; top:-30px;}

IFrame scroll bars not coming on Chrome

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>