I'm developing an Android application and I'm loading one google maps iframe in a WebView, just like this one:
http://maps.google.es/maps/empw?url=http:%2F%2Fmaps.google.es%2Fmaps%3Ff%3Dq%26source%3Ds_q%26hl%3Des%26geocode%3D%26q%3Dmadrid%26aq%3D%26sll%3D40.396764,-3.713379%26sspn%3D11.856886,23.269043%26vpsrc%3D0%26ie%3DUTF8%26hq%3D%26hnear%3DMadrid,%2BComunidad%2Bde%2BMadrid%26t%3Dm%26z%3D10%26ll%3D40.416691,-3.700345%26output%3Dembed&hl=es&gl=es
It is showing correctly in Android emulator, but when I try in a real device a white space quite big appears at the bottom of the screen, so you can't see the whole iframe. I tried with two mobiles, one with android 2.2 and another one with android 2.3
I had a look to this one which sounds the same thing:
Problem with extra space at the bottom of android Webview
but it didn't work for me. Also tried some other things I read about like:
webView.getSettings().setUseWideViewPort(true);
webView.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading (WebView view, String url) {
view.loadUrl(url);
return false;
}
});
but nothing worked. Any idea?
Thanks in advance.
I can see the <body> element at the link you posted has bottom margin of 14px - maybe that's it? You can eliminate it using a JavaScript snippet in your WebView after you have loaded the page, like this:
myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px'");
also, there is a 44px margin on the right, if you wanna get rid of that one also, should be something like this:
myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px';document.getElementsByTagName('body')[0].style.marginRight = '0px';");
Also, to future-proof your app, you may want to set all four margins to 0, just in case.
Set the bottom and right margins to 0:
webView.loadUrl("javascript:document.body.style.marginBottom=document.body.style.marginBottom= '0px'");
It could be the problem with your XML.
Can you check that your WebView is not inside the ScrollView or anything which is having its inbuilt scroll. It might result in extra white spaces.
The other answers didn't work for me but this did:
webView.loadUrl("javascript:(function () {document.getElementsByTagName('body')[0].style.marginBottom = '0'})()");
Related
I have done my research and I haven't found a suitable question for my problem. I got a WebView inside a ScrollView, and once I get the HTML from my service, I call
myWv.loadDataWithBaseURL(null,myHtml,"text/html","utf-8",null);
Nothing special there. The problem I'm having is that, when I run my Application in a 4.4.2 Android tablet, the WebView loads the HTML with the words split in lines, eg:
This
is
my
sentense
And after a second it renders the HTML correctly but the ScrollView's scroll is as big as the number of lines it rendered before loading the HTML correctly. I have tested in 3 different smartphones and everything is fine, only in the tablet it seems to happen, probably due to some performance issue since my HTML is huge.
Does any of you have have had this problem before and knows how to solve it? Thanks in advance.
Extend WebViewClient. And in your custom WebViewClient overload the method onPageFinished.
#Override
public void onPageFinished(WebView view, String url) {
// If you create a listener, here you can trigger it
// you can show the webview here as it will be already measured.
}
If you show the webview when the page is already entirely loaded there won't be any ugly animation.
I'm new to ionic. I began designing and developing my app but I got to a problem very soon. I don't really know how iPhone works because I am only testing this on my android device.
In my app, I am using the starter tabs template with a header at top, tabs at bottom. In one of my nav-views, I have a fixed control area, a scrollable area, and a fixed narrow input area. Below is a simple description of my app layout:
The problem that I'm facing here is when I click on the input area for input, the android keyboard pops up, pushing my scroll area, input area, and tabs upwards so that my screen would look like the following:
This basically "jams" my app appearance. So I came to thinking how others have dealt with it. From googling I found that I could hide things when keyboard is active by giving "hide-on-keyboard-open" class to my divs but this would just display: none while still holding its width, height, and place.
My question is are there any ways to literally "remove" my elements when my keyboard is open and "restore" them when my keyboard is closed? I tried
window.addEventListener('native.keyboardshow', function(){
document.body.classList.add('keyboard-open');
});
if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) {
angular.element(document.querySelector("div.tab-nav.tabs").remove());
}
to add keyboard-open class to my body element and delete my tabs (even though I think I should monitor the tabs' class changes for the remove() action for it to work, but I only found jQuery ways to do it and I believe that's against the rules of angularJS?) but it didn't work.
So, what are the common ways to deal with this? As I kept thinking about it, I believe just removing and restoring certain elements or, whether it's possible or not, having keyboard come on top of the body element (just like z-index differences) wouldn't really be a pretty experience.
Thanks in advance for help.
Well it's never too late to post an answer. I managed to solve this problem based on some of this answers.
My solution:
Index.html
Added a ng-class listening to the showTabs attribute.
<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">
style.css
Added the following snippet so the tabs are hidden in case of keyboard open
.is-keyboard-open .tabs{
display:none;
}
.is-keyboard-open .has-tabs{
bottom:0;
}
app.js
On app.js, in the app.run method, I added the window.eventListener to the native.keyboardshow and hide in order to target in real time whenever the keyboard fires or hides.
Note that I used isAndroid() because I only had this problem in android.
$rootScope.showTabs = true;
if(ionic.Platform.isAndroid()){
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
$rootScope.showTabs = true;
}
function keyboardHideHandler(e){
$rootScope.showTabs = false;
}
}
Now everything is working as it should.
Notes: I tried previously:
- add more z-index # .tabs
- target the .tabs via css only
- position: fixed + bottom:0 # tabs
- a lot of answers on ionic forums and stack overflow
This was the best solution I found.
PS: Upvoted this one because I gained some white hairs trying to solve it properly.
I resolved this by "removing" and "restoring" my contents as yurinondual suggests in this link from ionic forum.
The suggestion was via css manipulation:
.keyboard-open .tabs{
display:none;
}
.keyboard-open .has-tabs{
bottom:0;
}
body.keyboard-open .has-footer{
bottom: 0;
}
I want to use the quick return pattern which is described here:
http://www.androiduipatterns.com/2012/08/an-emerging-ui-pattern-quick-return.html
When i use a webview this webview must have the fullscreen height of the device to implement it correctly. Then i have to inject a paddingTop to the body tag on the html in the webview to get the correct margin/padding from top. But there is a problem if the toolbar isnt shown and the site loads new content with javascript which cant scroll. First there is a ugly white area on the top off the webview and second the toolbar cant get shown because the site cant scroll.
Is there any best practice for this behaviour?
Is the javascript injection the correct way?
Ive used absolute positioning and CSS3 animations so clicking a trigger div makes another animate to cover it. This is working fine except on my fairly old Android phone, when you click the div infront you can sometimes select an option input which is in the div behind it. Ive tried adding a z-index but the issues is still there. Thanks
I was hoping for a CSS solution but ive done it with jQuery. Below are functions that I call to disable / un disable the input so it cant be selected.
function disableInputs () {
$('select').prop("disabled", true);
//alert('disabled');
}
function unDisableInputs () {
$('select').prop("disabled", false);
//alert('un disabled');
}
I encounter a problem of display with a webview i'm using in one of my application.
When I call loadData, the webview first display the text and then load the images of the page (standard behaviour).
Sometimes, if those images modify the text position, the old text position is not cleared and both old text and new text+image is displayed
Here a screenshot of what it looks like when the problem occurs:
It's like the webview do not redraw correctly it's content. Of course a simple invalidate() does not work...
It do no occur often but lets say one time over 20.
Code used to display the data (called outside Activity life cycle methods):
// Include the html headers to the content received from WS
String webtext = String.format(ConfigApp.HTML_BODY, wsdata.getText());
mWebView.setWebChromeClient(...);
mWebView.setWebViewClient(...);
mWebView.setBackgroundColor(0);
mWebView.loadDataWithBaseURL(null, webtext, "text/html", "UTF-8", null);
Any idea how to fix this?
I've finally found a way to fix the problem.
Remove the WebView transparent background:
String webtext = String.format(ConfigApp.HTML_BODY, wsdata.getText());
mWebView.setWebChromeClient(...);
mWebView.setWebViewClient(...);
// mWebView.setBackgroundColor(0);
mWebView.loadDataWithBaseURL(null, webtext, "text/html", "UTF-8", null);
Because my WebView has a blank background it's ok for me. Maybe it can be annoying for somebody else.
For sure it's a WebView bug.
I have frequently had sporadic problems with WebViews not displaying properly after having loaded content with loadDataWithBaseUrl. Although the WebView's height was set to wrap_content, the WebView wouldn't always resize to wrap the content. Instead the webview had a height of zero. Sometimes it would display fine and other times it would not. Sometimes the problem would only happen in a portrait orientation and landscape would work fine. I tried removing my setBackgroundColor call but that it did not help. However, I was able to get the problem to go away today by changing the layout that the WebView was in from a LinearLayout to a RelativeLayout.
If you set your WebView to a specific size, and not "wrap_content" , then after the data is loaded, the webview doesn't resize its content correctly.
I think it's a bug with the widget..
So..
Try to use "wrap_content" in the layout_height attribute.
Try
mWebView.setBackgroundColor(0x00ff0000);
You just have to call refreshDrawableState() method after calling loadDataWithBaseURL() method
and its will resolve your problem
mWebView.loadDataWithBaseURL(null, webtext, "text/html", "UTF-8", null);
mWebView.refreshDrawableState();