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
Related
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>
The backface-visibility doesnt hide the iframe backface
I created a flip box with iframe element on both side, when flip, the iframe on the front side will overlay the iframe on back side, apply backface-visibility: hidden does not hide it backface, although it shoud be:
Codepen link
<div class="flip3D">
<div class="front">
<iframe id ="frame" width="auto" height="auto" src="https://www.youtube.com/embed/wZZ7oFKsKzY?enablejsapi=1" frameborder="0">
</iframe>
</div>
<div class="end">
<iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
I can fix this by making the front side iframe visibility: hidden on hover. But
Question : Why backface-visibility is not working on iframe ?
You were missing transform-style:preserve-3d;?
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;}
I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.
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>