I've encountered some problem with Iframe on mobile devices using android. It appears, that the iframe is ingoring everythng in my css files or even direct styling. It simply put itselfs in the left top corner over all content.
Nothing helps me get it out of that place, not margin, absolute position or anything else.
Even when I wrap that iframe with div a set absolute position to that div, nothing change.
Does anybody have n idea,what this could do?
Related
I am using a WebView to display some maps in my app using the Google Static Maps API. However, when I load a map into my WebView, it's always either zoomed out too far (showing a massive amount of white space around the map) or too close (showing only part of the map). Given that I'm requesting a map of the same size as the size of my WebView, I should be able to "tightly" wrap with no issues, but I'm not sure how to achieve that.
I've tried just running at the default settings, and that results in the map being zoomed in too far (and scrollbars being displayed). I've also tried this:
mapView.getSettings().setLoadWithOverviewMode(true);
mapView.getSettings().setUseWideViewPort(true);
which just results in the page being fully zoomed out. Are there other alternatives I'm missing other than futzing around with the scale?
I had similar problem with the whitespace. What I did was to go into the CSS file for the WebView and edited the margin/padding on the image I was displaying to be negative (I just edited until I was happy) so it would display completely in the upper left corner.
Then I set the height and width of the webView in my Android XML file until I was happy with the result. However I was having a bit of a problem with the width showing some white space on some devices but the height was good once I had found the right value.
My solution to this was to try to set the width as the same as the height in the java.class file for the activity but I was not successful, maybe you will have more luck.
In the end I abandoned the webView for my project so I can't really give you any working code.
I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
Is it possible to scroll out of the page bounds in a webview?
Example: Webview page/content width: 15px, screen size: 10px. Can I scroll to X position 8px?
Technically I can, and it worked fine on my test device. However, testing on other devices I notice that it will stop rendering when I move out of the bound. The left part of the page will be 'blurry' or not visible at all, till I scroll back left and there is no more "empty space" in the webview, than it will update.
Is there a solution for this?
A possible solution would be making the content larger on the fly, with white space. But I cannot add padding to the webview, unless I put it in the html BEFORE I render it. But before I render it I won't know the width. After I render it there is no way to change the padding/add some empty space to the content, without loading it completely again. Right?
I solved this by added 1-2 page-breaks at the end of the html, it will render fine now and I customly prefent the view from scrolling to the end of the page, so that the white is not shown to the user.
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
My biggest annoyance with browsing websites on my Android browser is reading text with indented blockquotes. Android's webkit implementation (correctly, in my opinion) sets the width on any text element to the browser width.
However, this means that list and blockquote elements which have left margin or padding applied to them hang over the right edge of the visible screen. This makes for annoying reading experience, as the user has to be constantly scrolling right and left to read.
This behavior is visible in just about any site viewed on Android, and my feeling is that this constitutes a bug in the browser.
But my question is: does anyone have a good css solution to preventing this issue? I've tried wrapping all body text in a block-level element with max-width: 100%, but elements with left padding or margin still hang off the edge.
You should be able to fix that by setting the box model for the div/p/li etc.
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;