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'...
Related
Basically I am having the same problem as here, but because he never got a good answer I am reposting the question.
So the problem is that only in iPhone Safari the width="100%" on the portrait view seems to be misbehaving and giving the IFrame the landscape width. And I can't seem to figure out what is going on here.
I am using the correct viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
And the site within the IFrame can actually go way narrower than 320px and also has the same viewport defined. (I've read on one of the similar questions that this can be a factor so I am just clarifying).
In the debugger I can see, that before the URL was added, the iFrame's offsetWidth was 304px which is correct and after the load it was 588px, which is correct for the landscape view. But why it changed I have no idea. The page within the IFrame comes from a different domain so that could not effect it and the main page does not do anything with the iframe's width.
The iPhone I am using is an iPhone 5 iOS 7.0.2
PS. Please do not post any JS answers where you resize the iframe manually on window resize, I am currently looking for a non JS fix, and this is my last option that I plan to use. Also please do no post the #media CSS answer were you set min-width to 320px on iPhone portrait view width, that would not work for me for various reasons.
OK so after hours of debugging I finally found the solution I was after, but unfortunatelyit is not a pure CSS solution:
The CSS you must apply is this:
iframe {
min-width: 100%;
width: 100px;
*width: 100%;
}
If you set the width to lower than the portrait width and set the min-width to 100%, then you sill get width: 100%, but this time a version that actually works and now the iframe takes the actual container width and not the landscape width. The *width: 100%; is there so that in IE6 the width would still be 100%.
However this only works with the iframe attribute scrolling="no", if the scrolling is allowed, then it does not work anymore. So this might limit it's usefulness in some cases.
It is answered here: iframe size with CSS on iOS
Simply wrap your iframe in a div with:
overflow: auto;
-webkit-overflow-scrolling:touch;
http://jsfiddle.net/R3PKB/7/
I'm having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.
My goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.
Would grealty appreciate any advice or an alternative solution.
#media screen and
(max-device-width: 480px){
/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; } } </style>
The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.
I been stuck w/ this problem and there's no available solution on the net that works.
Not until I realized what's causing this.
CAUSE:
This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.
SOLUTION:
Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.
i.e.
image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"
Worked for me, ...hoping this can help you too! ;-)
What you are doing is correct but the problem is that rather than using -webkit-text-size-adjust:none; inside a style tag, you should use it in the below manner:
<body style="-webkit-text-size-adjust:none;">
This means you should use this as an inline css property.
To get rid of that problem you have to put the following in your CSS body tag:
-webkit-text-size-adjust: 100%;
This way Safari keeps the text to 100% of intended size. In case you set the value to none, the users won't be able to increase the font and this is an undesired behavior.
This CSS property is supported and should work.
Check the official Safari supported CSS reference:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
Furthermore please note that the media type screen is supported in:
Safari 4.0 and later.
iOS 1.0 and later.
I hope this helps.
BR,
Tolis
A retina iPhone has a 640px width, your media query stops at 480px.
Anyway, you can get rid of the media query altogether. The only webkit based mail client that will use this property (-webkit-text-size-adjust:none) is iPhone's and iPad's Mail app.
Also the Mail app may also be the only client supporting CSS3
I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).
I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.
<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
<iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>
The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).
How can I overcome this issue and provide scrollable iframe solution?
OK. found the solution.
apparently, the problem appear when the main document height is shorter than the iframe that is scrolled.
the parts of the iframe page, that exceed the document height, are not rendered.
So, under my needs, I could solve the problem by adding such a js (with jquery) code:
<script>
$(function() {
var iframe = $("#myIframe");
iframe.load(function() {
$("body").height(iframe.height());
});
});
</script>
If you have an access to iFrame body, apply some transform3d to its content to enable GPU rendering.
In my case adding -webkit-transform: translate3d(0, 0, 0); to main wrapping div did the job.
I'm using GWT 2.3 and have what I think is an extremely common layout scenario that doesn't seem to be very well supported -- but I hope StackOverflow can tell me I'm looking at the problem wrong.
I'm using layout panels to arrange my app. Typically, you put a layout panel into the RootLayoutPanel, where it takes over the whole browser window.
However, I have a site header and footer that need to be outside of GWT.
The problem is, as the docs clearly say, if you insert a layout panel into an arbitrary HTML element of the page instead of using the RootLayoutPanel, you lose the automatic resize behavior. You must specify the layout panel's starting size, and do any resizing manually.
How would I achieve this manual resizing? I'm pretty sure I can track the resizing of the HTML element via javascript, but how do I then interact with GWT to tell it the new size?
Thanks!
I would recommend using css absolute positioning in your html file :
<body style='position:absolute; top:10em; bottom:10em; left:0; right:0;>
<div id="top" style="position:absolute; left:0; top:-10em; bottom:0; right:0;">
<p> THIS IS THE TOP BANNER </p>
</div>
<div id="bottom" style="position:absolute; left:0; top:100%; bottom:0; right:0;">
<p> THIS IS THE BOTTOM BANNER </p>
</div>
</body>
Your RootLayoutPanel will attach to the body, which now has a 10em top and bottom margin.
One possible pure GWT solution.
You can add a resize handler. In the resize event you can get the new dimensions and resize your component.
The GWT mail sample pre GWT 2.0 Mail used "manual" resizing (but its a bit out of date).
http://code.google.com/p/google-web-toolkit/source/browse/releases/1.7/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java
Basically, you want to hook into the window resize event handler:
// Hook the window resize event, so that we can adjust the UI.
Window.addResizeHandler(new ResizeHandler() {
public void onResizeA(int width, int height) {
// Adjust each immediate child widget by calling child.onResize()
}
}
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.