I have a HTML file. And I used WebView to load this HTML file. After, the cursor appear on WebView, but I can't input Japanese or even I can't swap other keyboard as number keyboard. But if the HTML file has content in Japanese, It can display normal. The bug appear on Android 4.0.x, but 4.1.x or over don't have this bug.
This is my HTML file that I had created
<!DOCTYPE html>
<html>
<head>
<title>ZSSRichTextEditor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="ZSSRichTextEditor.js"></script>
</head>
<body onLoad="zss_editor.init();">
<div id="zss_editor_content" style="width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: auto;" contenteditable="true" ></div>
<div id="zss_editor_footer"> </div>
</body>
</html>
Related
How to load a html content with fixed height and width into a android webview which has height and width set to wrap_content?
This is my HTML page i.e label.html loading from assets.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#charset "utf-8";
/* CSS Document */
.Main{
width:50%;
height:200px;
border: 1px solid #09ED1C;
float:left;
background-color:#00F3FF;
}
H1{
color:#FC1D21;
}
</style>
</head>
<body>
<div class="Main" align="center">
<h1>This page is created using internal CSS</h1>
</div>
</body>
</html>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue">
<WebView
android:id="#+id/wv_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
WebSettings webSettings = mWebViewHelp.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebViewHelp.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
mWebViewHelp.loadUrl("file:///android_asset/label.html");
This is adding white space on the right side of webview even though its wrap_content,WebView.SCROLLBARS_INSIDE_OVERLAY is also not solving my issue,any help would be much appreciated.
You need to add this in your HTML header:
<meta name="viewport" content="width=device-width, initial-scale=1">
So it will look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[YOUR_DOCUMENT_NAME]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I hope it works so not please respond
This seems to work great on all PC browsers, and on Mac/iPhone Safari, but no iframe appears on Android Chrome. It should appear half below the bottom, half above... How can I safely achieve bottom positioning?
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
</head>
<body>
<table width="700"><tr><td>Test</td></tr></table>
<iframe src="http://www.ibm.com"
style="position:fixed; left:0px; width:600px; bottom:-200px; height:400px;">
</iframe>
</body>
</html>
(This is actually a simplification of much bigger code that has the same problem. Please help...)
I am developing a phone-gap application. Phone-gap uses HTML 5, CSS 3 and java script to render html in the default web kit of device. The scenario of the application is that it it show the web page of third party in the IFrame of our app page view.
Before explaining the problem I would like to demonstrate an example here.
See the 1 image here: (copy and paste it in new browser to see image.)
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042400/1.png?1396949391
The above Image is the default web browser of the android device. I have open a web page in the default browser. You will see that the payment div is smaller than the actual device screen size and adjust it self in this manners.
Now see the 2 image here:(copy and paste it in new browser to see image. )
https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042401/2.png?1396949638
The above Image is the Google Chrome web browser of the android device. I have open a web page in the Google Chrome browser. You will see that the payment div occupying the full device screen size and adjust it self in this manners. I think What is done here is the GWT(Google Web Toolkit) render the received html and render it efficiently by recognizing that the actual html is smaller than the device screen width and implicitly stretch it to the device screen and discard the empty padding.
Now I am coming towards my phone-gap problem. Below is the screen shoot of the my app running in the device.
see the 3 Image below:(copy and paste it in new browser to see image. )
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042403/3.png?1396949903
What is done here? The phone-gap rendered the received html and by help of native web tool kit of android device(as this app is currently testing on android). You can see that the received html div is smaller than the actual screen size(likely to be same as in pic 1). It is not giving the proper look and feel of a mobile application. How can I make it possible that the (image 3) received html to stretch to the full size of device screen. I have edit a image to illustrate you that What I actually wants.
The below Image is my requirement.
This is the 4 image (it is not the actual snap shoot but it is required):
href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042406/4.png?1396950380
kindly help me how can I get the Google chrome browser like view in phonegap?
Edit 1:
This is my index.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>
.header{
display:inline-block;
text-align:center;
width:100%;
height:100px;
background: #203864; !important;
}
</style>
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
<script>
function fixiFrame () {
$("#formframe").width($(window).width() );
$("#formframe").height($(window).height() * 0.83 | 0 );
}
</script>
<title>My Test App</title>
</head>
<body>
<div data-role="page" id="main" >
<div data-role="header" class="header" >
Home
</div>
<div id="iFrameDiv" >
<iframe id="formframe" width="100" height="650" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
navigator.splashscreen.show();
</script>
</body>
</html>
and this is form.html file code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport"
content="user-scalable=yes,
initial-scale=0.5,
maximum-scale=0.5,
minimum-scale=0.5,
width=device-width,
height=device-height,
target-densitydpi=250"
/>
<link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
<script src="js/myjs/jquery.js"></script>
<script src="js/myjs/jquery.mobile-1.2.0.js"></script>
</head>
<body >
<div data-role="page" id="billPage"><br>
Please Enter the Customer Billing Details
<form id="billForm" method="POST" action="https://ipg.comtrust.ae/SPIless/Registration.aspx" >
<div data-role="fieldcontain" class="ui-hide-label">
<label for="OrderID"> Account Number: </label>
<input type="text" name="OrderID" id="OrderID" value="" placeholder="Account Number"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="Amount"> Billing Amount (USD):</label>
<input type="text" name="Amount" id="Amount" value="" placeholder="Billing Amount (AED)" />
</div>
<input type="hidden" name="OrderName" value="Pizza-Grill" />
<input type="hidden" name="Currency" value="USD" />
<input type="hidden" name="Customer" value="Online" />
<input type="hidden" name="Language" value="en" />
<input type="submit" data-inline="true" data-transition="pop" value="Continue" id="submitButton" onclick="return checkform();" />
</form>
</div>
</body>
</html>
If you provide a little code (source) for the snapshot you put here it would be a lot easier to help you. anyway it seems the page has a fixed width so the only thing that makes the difference between two apps (default browser and chrome for android) is the default zoom settings which on chrome it is set to fit the width of page.
So your question will probably have a similar answer to this one : How to set the initial zoom/width for a webview
It seems like your issue seems to be related to this question/answer.
The issue stems from the viewport meta tag. Since you didn't provide us with any code, I'm going to just assume that your meta tag is wrong.
A lot of tutorials start out with a meta tag of:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Which appears to be "Zoomed out" as you are describing.
To fix this, in my projects, I use this meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
I have created a mobile app using jQuery Mobile and PhoneGap. When I run the app on a Windows Phone 7 emulator, it displays at the expect width.
http://post.robfine.com/jqueryapponwindowsphoneemulator.png
However, when I create an apk and test the app out on my android device, it displays at a much larger width.
http://post.robfine.com/jquerymobileappsowideandroid.jpg
From my research, everything points to the viewport metatag, which I already have handled.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Circle of Death 2.0</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/GameLib.js"></script>
</head>
<body>
<div class="app" id="deviceready">
<div data-role="page" id="page1">
<div data-role="content">
<div>
<img src="img/CircleOfDeath2Title.png" alt="Circle of Death" width="100%" />
</div>
<div style="text-align: center; padding: 10px;">
<img src="img/cardback.png" alt="Card Deck" onclick="DrawCard();" id="CardDeck" />
</div>
<div>
<h2 id="RuleTitle" style="margin:0px;"></h2>
</div>
<div>
<span id="Directions"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Has anybody else seen this issue when using PhoneGap and jQuery Mobile?
Thanks in advance.
You have a lot of stuff in your viewport tag, my phonegap apps work fine in android just with the following viewport tag:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
I want to show some html in a WebView. In that html code there is an image tag "img src" and a style within: style="max-width:300px;max-height:300px;".
My Smartphone's display width is 480px. When I set the max-width style to 480px, the image don't fit to the display and is not complete visible. Around the WebView, there is no Margin or Padding. But when I set the max-width to 300px, the image fits perfectly.
What is the reason of that? My display has a width of 480px und the image with that style 300px.
webView.loadData(newContent, "text/html; charset=UTF-8", null);
Html Code (newContent):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:300px;max-height:300px;" />
<p>Text Text Text</p>
</body>
</html>
I have tested many ways and solve this problem by using percent.
Now the image fits perfect to display if die image is large and keep it's width if it is smaller than the display.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:100%;" />
<p>Text Text Text</p>
</body>
</html>