iframe and Safari - Post ID 229610

User 2147626 Photo


Ambassador
2,958 posts

Easy way to find out in vsd. Remove the widget and see if there is any difference. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2287485 Photo


Registered User
90 posts

Gunsmoke wrote:
Easy way to find out in vsd. Remove the widget and see if there is any difference. :cool:


Yep, I just tried but still the same. hmmm
User 2147626 Photo


Ambassador
2,958 posts

Got to be something with that IOS because it looks great in Safari on my PC. Good luck with it. :P
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2287485 Photo


Registered User
90 posts

Gunsmoke wrote:
Got to be something with that IOS because it looks great in Safari on my PC. Good luck with it. :P


Thanks Gunsmoke for checking things out for me, I appreciate it. I'll keep looking into it, and if worse comes to worse, I'll just remove the iframe altogether.
User 271657 Photo


Ambassador
3,816 posts

Something else to try?:
https://coderwall.com/p/c-aqqw
In order to make an iframe scrollable on iOs, you have to add the CSS3 property "-webkit-overflow-scrolling:touch" to the parent container.

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>

Here's some more info (seems to be a common problem): http://dev.magnolia-cms.com/blog/2012/0 … d-problem/
Scroll down to:
iFrame in an Overflow Div #1: -webkit-overflow-scrolling: touch
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2287485 Photo


Registered User
90 posts

paintbrush, thank you I really appreciate these resources. I will definitely check this out and apply it.

Quick question. Would I add this to the beginning of the iframe code I already have in the box?
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
Existing iframe code here
</div>

Or completely change it to the format that you provided?

Thanks again
User 271657 Photo


Ambassador
3,816 posts

I would do all this in an HTML box and insert that in the page. Then you can apply some rules to the DIV that holds the Iframe. Insert the HTML box and put the style in the head and the actual div and iframe code in the body.
<style type="text/css">
#iframe-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>

Then put the Iframe in the container div:
<div id="iframe-container">....iframe code here....</div>
Always use the option to add an HTML box for custom code in VSD so you can edit/update if needed and it won't get over-written by your VSD default page styles when you upload the page.
Let us know how it goes :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2287485 Photo


Registered User
90 posts

Paintbrush, thanks once again for your attention to this. It comes out a bit different, not quite a full iframe, however I will need to look at what I have put in the html box again to make sure I'm understanding this. Here's what I have currently,
Header:
<style type="text/css">
#iframe-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>

Body:
<div id="iframe-container">
<iframe src="the website page" width="550" height="350" scrolling="yes"></iframe>
</div>

The iframe slimmed up a bunch, but extends downward the length of the entire page of the website i'm trying to put in the iframe.
User 271657 Photo


Ambassador
3,816 posts

Well, this seems to be quite the challenge :o
https://www.google.com/#q=iframe+problem+on+iphone

Maybe it's time to take the easy way out...
1. Create a new page just for the Iframe content. Call it Resources and link to it.
2. Move the things in the side-bar up to give the Iframe the whole width of the page, then extend the page length to fit the length of the Iframe as well.

I don't have any "i devices" to test on, maybe someone familiar with ios might be able to pull a solution out of all the various attempts around the interwebs to make this work.
I hope you find something that works :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.