I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.
Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.
<div class="scroll-wrapper">
<iframe height="260" width="280" src="info.pdf"> </iframe>
</div>
.scroll-wrapper {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;
height: 300px;
}
Maybe you should try using viewport.
Or using responsive breakpoints
#media screen and (max-width:512px) {
size:
}
#media screen and (max-width:512px) {
.scroll-wrapper{
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;enter code here
height: 300px;
}
}
try this
iframe {
width: 100% !important;
}
Related
I have a type of "store-locator" on https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/
Due to demand, I want to put this in an iFrame so other websites can display this form on their page. Giving them the possibility to easily add my "store-locator" to their website.
At the moment I have:
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>
Which works, as long as the screen doesn't get to small.
However, the form is responsive, and if the screen becomes very small, the row with addresses goes underneath the big map. Making the complete form a lot higher then on normal view. (normally it would be 734px high, in responsive design it is 1388px high)
This would mean that I need an iFrame that stretches just as the content stretches. (if that is at all possible)
If that is not possible, would it be possible to put something like this in the style? (it doesn't work if I use it in my example, but maybe I'm doing it wrong?)
Style="#media (max-width:675px){iframe{height:1388px}}"
The goal of this piece of CSS would be to change the height of the iFrame when the width goes below 675px.
Another solution is welcome, as long as it works :). Because I'm displaying the code on my website, so other can just copy-paste it, it would be beneficial if the code is kept reasonably simple.
It seems 1 person has removed their comment, even though the solution was pretty good. Essentially, this was the code that I ended up with thanks to him:
<style>#iframe {width:100%;height:740px;border:none;overflow:hidden;}
#media (max-width:675px){#iframe{height:1588px;}}
</style>
<iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/
"frameborder="0" id="iframe" name="De Detailer-Zoeker"></iframe>
The only problem is that this only responds to the size of the browser-screen, and not the container in which the iFrame is placed. This means that the iFrame will behave differently on a website with sidebars, then one without sidebars.
You have a couple ways of dealing with this issue.
1. Breakpoints
Add a breakpoint the moment the list of address goes underneath the map. You can use CSS Media Queries to acheive this.
#media (max-width: 675px) {
iframe {
height: 1388px;
}
}
2. Javascript
Use Javascript to read the width of the screen and then change the height of the iframe accordingly.
Adjust width height of iframe to fit with content in it
Make iframe automatically adjust height according to the contents without using scrollbar?
However the Javascript method has drawbacks.
It works fine when you define all CSS in an external style sheet.
iframe {
width: 100%;
height: 734px;
border: none;
overflow: hidden;
}
#media (max-width:675px) {
iframe {
height: 1388px
}
}
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>
code for responsive iframe
<style type="text/css">
iframe {
width:100%;
height:734px;
border:none;
overflow:hidden;
}
#media screen and (max-width:1166px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:1024px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:980px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:767px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:599px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:479px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:374px) {
iframe {
width:100%;
height:1388px;
}
}
</style>
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>
You are almost there, you just need to adjust your media query a bit.
You say you want other websites to include your iframe without having to edit their CSS file. You can do that as followed:
Tell the client to place the following CSS in their <head> section.
<style>
#media screen and (max-width:675px){
#iframe{
min-height:1388px;
overflow-y: scroll !important;
}
}
</style>
Then, tell them to put the iframe between the <body> tags where they want to display the iframe.
<iframe id="iframe" name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>
Look at this working fiddle:
Hope this helped!
I'm having trouble with displaying a Bootstrap responsive page inside an iframe in iOS safari browser. It works fine in Android Chrome.
In one of the iframes, the page loses its responsiveness and doesnt even scroll (horizontally as well as vertically).
In another iframe, a different page loses its footer and vertical scrolling displays the content behind the iframe.
The page which loses responsiveness
Scrolling issue
Used the following code
<iframe src="add.php" frameborder="0" overflow-x: hidden; overflow-y:hidden; style="height:100%;width:100%;"></iframe>
separately tried the following
<iframe src="add.php" frameborder="0" style="height:100%;width:100%;"></iframe>
iframe{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
As well as :
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
Using jQuery 1.11.3, Boostrap 3.3.5, respond.js, html5shiv.js, modernizr.js
Try to use this:
iframe {
border:none;
position: fixed;
width:100%;
height:100%;
overflow: auto;
}
This will make your iframe fit to the screen so that, everything remains on your view.
and make sure that, you have removed margin from body
Here is preview of W3Schools in iframe
Hope works fine.
I am trying to use the following css code (which works fine on a desktop browser) to create a container that is a square the width of the mobile screen:
.my_container {
width: 100vw;
height: 100vw;
}
.my_container iframe {
width: 100%;
height: 100%;
}
The iframe looks like this:
<div class='my_container'>
<iframe src='https://vine.co/v/iMJzrThFhDL/embed/postcard' frameborder='0' allowfullscreen>
</iframe>
</div>
When viewing the app (ionic/codova) on my iPhone 5 running ios 9 the container is much much wider than the screen width. It seems that iOS doesn't correctly obey vw.
Is there a way to do this?
I have added an iframe and it is working fine in all browsers and some devices but in iphone 6. The iframe is not responsive. It does not fit 100% of iphone screen size.
I found many solutions online but most of them showed how to make an iFrame scroll in iphone. I dont need that. I want to make it responsive and adjust according to screen size.
<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>
I have removed the src="" in iframe in the sample above
From the screen shot it can be seen that the iframe is not responsive and a horizontal scroll appears. During loading the iframe is according to the devices viewport but once it is fully loaded the iframe takes the full width and the horizontal scroll appears.
Checking on browser stack
This problem is solved, simply had to apply this styling. I did an inline-css to this.
width: 1px;
min-width: 100%;
*width: 100%;
Here is a link to a more detail answer
I have defined height for iframe but mobile browsers ignore height (except firefox). On desktop browsers is not problem. It also ignore my main div. Iframe is in main div. I tried:
overflow: auto;
-webkit-overflow-scrolling:touch;
it do not help.
Iframe:
<div class="main">
<iframe id="webmaster_frame_id" name="webmaster_frame_name" src="http://lshunter.net/ls/index.php?option=com_lsh&view=lsh&layout=webmaster&tmpl=component§ions=1&font_type=Times New Roman&font_size=11px&start_time_eventtitle_font_size=12px&tvname_font_size=12px&tz_name_font_size=12px" width="790" height="600" scrolling="auto" align="top" frameborder="0">Your browser does not support frames, so you will not be able to view this page.</iframe>
</div>
main div css:
.main {
height: 1150px;
width:100%;
margin-left:auto;
margin-right:auto;
margin-top: -66px;
opacity: 0.83;
background-color: #FFFFFF;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
This is how it looks on mobile browser.
The height is too high for a mobile browser... If you want that the iframe works correctly, I have two solutions for you :
Definit a min-height in the css code for .main code.
Create a mobile version of the code.
For the second solution, there is an example :
/* mobile CSS */
#media screen and (max-width: 480px)
{
.main {
height: 480px;
}
}
If you want additional information, check here : http://en.wikipedia.org/wiki/Responsive_web_design
An example of Responsive Web Design : CSS Zen Garden