I have problem with displaying round edges in Android browser (in Samsung Galaxy Tab). However, it works fine in IOS browser (in iPad and iPhone i.e, Safari). As shown in the following image
Link to the image Round corner display problem in Android browser
Below is the code
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=false">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cordova-1.8.0.js"></script>
<script type="text/javascript" src="javascript/precache.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="front">
<div data-theme="b" id="search-container">
<form id="search-field" action="" method="get" data-ajax="false">
<input type="search" name="search" value="" />
</form>
</div>
</div><!-- /page -->
</body>
</html>
I am not sure if I have to override the default jQuery Mobile styling. If so can anyone let me know the configuration I have to override or if there is any other solution to overcome this issue.
However, this works fine when the input field is in focus, as shown here Round corners display properly when the field is in focus
When I do a view page source in browser, this is the code (for div block)
<div id="search-top">
<form id="search-field" action="" method="get" data-ajax="false">
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-b" style="border-radius: 1em;">
<input type="text" data-type="search" name="search" value="" class="ui-input-text ui-body-b">
<a href="#" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="b" data-mini="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">clear text</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
</div>
</form>
</div>
Thanks in advance
After many Tests, I've found this issue's reason!
Just remove this class .ui-shadow-inset from jquery.mobile.css file.
Related
I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.
The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.
This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.
Any ideas as to what I missed / got wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body style="margin-top: 20px">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-5 col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">My Panel Heading</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value A"/>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Really Long Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value B"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Override bootstrap 3.3.6 defaults with this:
#media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}
You need to use col-sm/md/lg to define the column/s
Col-xs-* is for mobile devices correct, but will not display what you want properly.
After updating to Firefox 25 on Android (Galaxy S4) just days ago, i found an issue with fixed header in jqm 1.3.2, it seems to be positioning above the screen pulling footer and slidepanel up.
If i tap the screen the header comes in okay and positiones footer okay, then disappearing again when tapping once more.
Anyone else noticed any such problem in new FF25 on android ?
Here is a source where this scenario occurrs, ive removed all load and custom css and js as it doesnt affect the problem.
is it FF25 or is it me ??...
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-15">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>TEST</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="plugins/autocomplete/jqm.autoComplete-1.5.2-min.js"></script>
<script src="plugins/touchswipe/jquery.touchSwipe.min.js"></script>
</head>
<body>
<div class="jqm-mypage" data-role="page" id="index" data-theme="c">
<div data-role="header" data-position="fixed" class="jqm-header">
<h1 class="jqm-logo">heading</h1>
Menu
</div>
<div data-role="content" class="jqm-content">
<p>Content</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>....</h1>
</div>
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list">
<li data-role="list-divider">TEST</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!-- /panel -->
</div>
</body>
</html>
SOLVED
Obviously a bug in FF25 mobile.
If i set div content a min height that is higher than the screen height, the fixed header shows fine and everything is positioned normally.
On pages where the content is less than the screen height, the fixed header disappears on pageload, pulling footer and panels up.
I am using phonegap and jquery mobile. my code is given below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=screen.width; initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div class="ui-btn-corner-top" data-role="header" data-theme="b" >
<h1>Login</h1>
</div>
<div data-role="content">
<div>
<h4>
<label for="userName" style="text-align:center">User Name</label>
</h4>
<input name="userName" type="text" id="userName" value="" data-theme="b" />
</div>
<div>
<h4>
<label for="passwordinput" style="text-align:center">Password</label>
</h4>
<input name="passwordinput" type="password" id="passwordinput" value="" data-theme="b" />
</div>
</div>
<div class="ui-btn-corner-bottom" data-role="footer" data-theme="b">
<h4>Auth Demo</h4>
</div>
</div>
</body>
</html>
But the elements are not populating for the entire screen...it ends in the middle of the screen.
what do i have to do if get it for the entire screen height and width ?
Add the data-position="fixed" attribute to the footer div.
More details here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
May be you could try doing this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<body>
<div id="page" data-role="page" data-theme="b" style="width:100%; height:100%">
...
</div>
</body>
I have a text input in jQuery Mobile. I'm also using PhoneGap to package it up as an application. The problem, however, is that, when I tilt the phone to landscape view, I the text editing isn't going full screen. How do I make it do that?
<!DOCTYPE HTML>
<html>
<head>
<title>My App</title>
<script src="phonegap.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqm/jquery.mobile.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile.theme.min.css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jqm/jquery.mobile.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
<script src="myapp.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-id="header" data-position="fixed" data-theme="c">
<h1 style="text-align:left; margin: 10px;">My App</h1>
Settings
</div><!-- /header -->
<div data-role="content">
<p>
<label for="basic">Text Input:</label>
<input type="text" name="status" id="status" value="" />
</p>
</div><!-- /content -->
<div data-role="footer" data-id="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li>New Log</li>
<li>Logs</li>
<li>About</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
This is a good example of what I'm trying to say. This is the text input when the messaging app is in portrait mode.
Now when I tilt the phone to landscape, the text input box will become full screen like this:
That's what I want to achieve.
Add the following in your header:
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
So your header would look like something like this:
<head>
<title>My App</title>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<script src="phonegap.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqm/jquery.mobile.theme.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile.structure.min.css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jqm/jquery.mobile.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
<script src="myapp.js" type="text/javascript"></script>
</head>
Have a try. This should normally work.
When I resize my browser window and make it smaller, the navbar nicely creates a collapse menu with a button on the right top corner. When I view the same site on my android phone, the navbar menu is always collapsed and the top right corner button is not visible. How can this be solved? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>My Groundhops</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Groundhops</a>
<div class="nav-collapse">
<ul class="nav">
<li>Clubs</li>
<li>Visits</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">Content</div>
</div>
</div>
</body>
</html>
You're probably missing the meta tag required for mobile devices to properly scale.
So stick this in the head section of your page and try again:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
it seems to be a twitter bootstrap issue on opera mobile, it works on the default android browser. So my code seems OK.
https://github.com/twitter/bootstrap/issues/3621