My client has a wordpress site and one page is embedding a map via iframe:
<iframe
src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"
height="350"
width="690"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
When I view the page in my iPhone, it renders mobile-friendly and resizes the iframe to fit the viewport, but the state and zip code are getting cut off. I tried adjusting the height of the iframe and also the bottom padding, but it seems to be something on Google's end. Any idea how to fix this? I added a blue border to my iframe so you can see that it's not the iframe which is clipping the text:
I recommend posting a link to the site or posting some of the CSS. This would make it easier for the SO community to troubleshoot the issue.
I replicated your issue by removing the iframe attribute width="690". I suspect the Wordpress CSS or some JavaScript is overriding the iframe width and cramming everything into the iPhone screen width.
To override the automatic resizing I just gave the iframe an id and set the width explicitly in my CSS.
#WidthTest {
width:690px;
}
Regardless, I'm sure you can find a similar solution by digging around the Wordpress CSS/JavaScript.
I edited the code. This works great for me! You might want to change the width according to your needs.
<iframe width="380" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=16162+Beach+Boulevard+%23100,+Huntington+Beach&hl=en&pcsi=2051297199499108728,1&geocode=FUCmAgIdBaP3-A&sll=33.728064,-117.988603&sspn=0.006295,0.006295&ie=UTF8&view=map&cid=2051297199499108728&hq=16162+Beach+Boulevard+%23100,+Huntington+Beach&hnear=&ll=33.730729,-117.987242&spn=0.005354,0.006437&z=16&iwloc=A&output=embed"></iframe>
Related
I'm trying to display the page plugin (https://developers.facebook.com/docs/plugins/page-plugin) inside a div that I set to 400px, and have the page plugin iframe adapt to this 400px width thanks to the adapt_container_width param. It doesn't work.
So, first things first, don't suggest that I set the page plugin's width to 400px directly. I'm just using this 400px on the parent as an example. Ultimately I won't know the screen size to which the parent will adapt. But I mean, if it doesn't even work with a hard-coded fixed width...
Here is the code (Vue) :
<div style="width: 400px">
<iframe
src="https://www.facebook.com/plugins/page.php?href=[...my page]&show_posts=true&width=500&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[...the app id]"
width="500" height="800"
style="border:none;overflow:hidden"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I've tried removing the width and height attributes, removing the width and height params in the url, setting it to 100% on one or the other... Nothing works. The iframe ends up being either 500px in width, or 300px if I don't set a width, which I guess is the default value. It never adapts to 400px.
I absolutely don't understand what that adapt_container_width=true is supposed to do or how to use it.
PS: Also, I'm using show_posts=true instead of tabs=timeline because of this other well known bug : https://developers.facebook.com/community/threads/281007613843950/. It is inconsequential to this problem.
EDIT
As suggested by a comment, I tried setting the width directly on the iframe. Setting it on the width attribute or by a style attribute doesn't work either. The only way I could MAKE IT WORK is by setting the width directly in the url parameters.
Thanks to the fact that I'm using Vue, I can modify the url dynamically on page load, so I can make it adapt to the screen size, but... I still don't understand the point of that adapt_container_width then, as I have to explicitly give it a fixed width at the deepest level I have access to.
If you're using some framework that allows you to dynamically change the HTML code at runtime like Vue, you can make the plugin responsive by modifying the width directly in the url parameters given to the iframe, with something like this :
<ClientOnly>
<iframe
:src="`https://www.facebook.com/plugins/page.php?href=[your page...]&show_posts=true&width=${screen_width}&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[your app id...]`"
:width="screen_width" height="800" style="border:none;overflow:hidden" scrolling="no"
frameborder="0" allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
</ClientOnly>
Where "screen_width" is a variable that contains the current screen width... For me it's a computed value on page load :
const screen_width = computed(() => {
return window.innerWidth
})
You can then set the adapt_container_width to whatever... So, if anyone still has some input on what the hell this param is for, I'm still interested. Otherwise, this is "solved".
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...
I've converted an existing site theme (that I did not build) into a responsive theme for mobile support. It's a Drupal 6 site, if that matters.
I'm getting a slight right white margin on most interior pages, and I can't seem to find the culprit. I've tried setting the body width to 100%, setting overflow-x to hidden on the body tag, and outlining all the divs in red to find the culprit.
Do you know of any causes of a right margin on mobile Safari?
View port setting:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
The right side margin is not for scrollbar, as this margin differs from sites that fit right like cnn.com
An example interior page:
http://nano.omnidev3.com/nanotech-101
(Trying to avoid a Google index. This demo site is not under my control, so I can't put in the normal measures I would to properly prevent a stage site from being indexed.)
I'm sorry to say this, but that is one piece of disgusting HTML. 20+ CSS includes, 10+ javascripts, divs nested 10 levels deep...
Anyway, if the (logical) width of the device is 320px (i.e. all iPhones) then doing this:
<iframe src="http://meltwaternews.com/magenta/xml/html/93/2/v2_371253.html"
width="343" height="450" scrolling="no" frameborder="0"
allowtransparency="true" style="overflow-x: hidden;">
will make the page 343px wide, giving a white edge. Nothing special.
Try setting it to 320px or 100%.
When I paste the iframe code directly into the source code view of TinyMCE and click save it changes the code to:
View TinyMCE code after saving adds </p>
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></p></iframe>
View HTML source of HTML page:
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"/>
Original iframecode
<iframe src="http://maps.google.co.uk/maps" width="425" height="350" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
This is effecting the rest of the page layout and breaks the footer.
I am using Silverstripe 2.4.5 if this helps.
TinyMCE is not too much of an iframe fan. There are at least three (more or less) quick fixes:
If it's only for Google maps and always at a fixed position, you can use the Addressable module: http://deadlytechnology.com/silverstripe/google-map-module/
If it's only for Google maps but just anywhere in the $Content field, you might want to try short codes: http://www.ssbits.com/tutorials/2010/2-4-using-short-codes-to-embed-a-youtube-video/
Fix TinyMCE's mess on the server side within the onBeforeWrite() method: http://www.silverstripe.org/general-questions/show/16438#post305472
If you can use 2., take a look at a complete example:
PHP code: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/code/Page.php#L42
Template: https://github.com/xeraa/silverstripe-book/blob/master/chapter-06/mysite/templates/Includes/GMap.ss
Actually the easiest solution is in the TinyMCE click the little HTML icon (next to the anchor) and then paste the iframe code there. This way it will not replace the html tags to </p>
Trying to put the Dark colored Like Box on my website, everything seems to function properly but the color looks like its the light scheme, what's the problem?
Here's the code I used:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=360&height=258&colorscheme=dark&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:360px; height:258px;" allowTransparency="true"></iframe>
I tried both the iframe and html5 codes.
Another problem is sometimes only a couple faces show in the box and other times it displays max faces.
The dark color scheme is rendering properly, but by design it doesn't have a background (it's transparent). Put it in front of a div with the background you want, as demonstrated here.
The developer button wizard wasn't working for me (using Chrome). Not sure why, but I found the data element that changes the colorscheme from light to dark. You can manually add the following and it will work just fine.
data-colorscheme="dark"
Example:
<div class="fb-like" data-href="http://www.nike.com" data-send="false" data-colorscheme="dark" data-width="450" data-show-faces="false"></div>
I seem to get a similar error..
I'm using the 'like' and the 'login' plugin.. when I'm logged everything is fine.. when I'm not, my 'like' button is light...
issue: 187studio.ch (top of the page)
I know I'm late to this thread, but at the present time the dark color scheme appears broken so perhaps others might end up here looking for a solution.
Jimmy Sawczuk's example above still works but that is because he isn't showing the 'stream'. If you set the 'stream' property to true you can see a big problem or two.
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=360&height=258&colorscheme=dark&show_faces=true&border_color&stream=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:360px; height:258px;" allowTransparency="true"></iframe>
</div>
Link to demonstration
The posts themselves are all backed in white... so much for a dark color scheme
The account name next to the avatar is white text on a white background... So invisible.
Since the markup is in the iframe and I've run out of properties to customize I'm wondering what can be done?