I have been trying to add a javascript map to my wordpress site and for some reason the iframe is not respecting the height attribute I set.
I've tried it using < iframe > tags and even with a plug in short code. Both lines can be seen here:
<iframe src="https://www.shiftins.com/county/index.html" width="100%" height="900" scrolling="no"></iframe>
[iframe src="https://www.shiftins.com/county/index.html" width="100%" height="600"]
And can be viewed live on this page: https://www.shiftins.com/test-page-1/
I have iframes running on other parts of my site and they work properly. How can I fix this issue?
BTW I have tried !Important and still no luck.
On your live site the height of the iframe is set in the style with "height:150px" :
if you remove this from your css it will work like a charm :
Related
Let's say I have an iframe hosted on www.my-iframe.com. And let's say that my iframe is embedded in a page on a different domain using:
<iframe src="http://www.my-iframe.com" scrolling="no" height="500" width="100%"></iframe>
Please note that the iframe tag has the attribute scrolling="no".
I only have access to edit the iframe code, not the pages on which my iframe is embedded. This makes it so I cannot change the scrolling attribute of the iframe html tag or the overflow: hidden; css styling of the iframe.
Is there a way that I can force a scroll bar to appear when necessary from within the iframe code?
Any help/advice is appreciated!
What you could try is maybe using a JS library to simulate a a scrollbar, there are plenty of them on the internet.
Here are a few examples (neither unordered nor necessarily the best ones): iScrollJS
fullPage.js
jQuery scrollbars
I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !
I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.
Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.
A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.
animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.
I tried to attach another website to my current page using iframe,
but it looks ugly with the scroll bars.
Is there any good alternative to it?
Any suggestion to achieve what I want, nicely attaching another webpage into my page without the annoyance of those scrollbars?
Make height and width of iframe equal to your web page and if you want on a specific part of page then adding css overflow : none should help, and frameborder:0 will clean up frame borders..
Here is a good tutorial regarding scrolling
Change the height and width accordingly
Try this
<iframe height="100%" frameborder="0" scrolling="no" width="500px" style="width: 500px; height: 100%;" src="http://example.com" allowtransparency="true"></iframe>
Or try to use a custom scrollbar like this one: Link
Ok I had the same problem and this jquery plugin solved this problem perfectly.
http://plugins.jquery.com/project/iframe-auto-height