I want to have a 2-column layout in a JQM page. The first column will be an image, and the second column will be some text.
<div data-role="content">
<div class="ui-grid-a">
<img class="ui-block-a" src="/image/no-picture.jpg"/>
<div class="ui-block-b">
<h1>Some Text Here</h1>
</div>
</div>
</div>
I tried to set max-width, it works in a browser, but didn't work in android webview. What is the best way to do this?
Thanks
This is a working example. I have tested it on Galaxy S3 andr. 4.1
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="http://www.index.hr/thumbnail.ashx?path=images2/europskimljekari_AFP26112012.jpg&width=325&height=197"/>
</div>
<div class="ui-block-b">
<h1>Some Text Here</h1>
</div>
</div>
Give me a comment if you wanted something else. Also dont forget to use this in your header:
<meta content="width=device-width, minimum-scale=1, maximum-scale=2" name="viewport">
Related
I am using the carousel example from here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I have some example images from my app which I took from my mobile 5.7 inch with print screen and removed the notification bar up (which shows the signal etc). I am trying to make these example images (carousel) the same height and width of my screen without to have the user, to scroll down or right to see the image full. So the user will see an action bar (the one that apps have beause it will open in a webview) and the carousel only. I tried changing the width and height of the images without success.
UPDATE: Based on Metatron5 answer , I changed the code and it works in firefox for android but it doesn't recognize the vh and vw in the android webview
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="begin.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="first.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="second.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="third.png" alt="" style="height: 100vh; width: 100vw;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Like in the Comments the Problem seemed to be that there was some Cashe on the phone, which where the reason the style didn't work. So it finally worked, but I want to make a note, that the Units vh and vw are not working in Androit Webview.
I have also run into the same problem a few month back. VH & VW wern't working on Google TV. So, I solved this problem with JavaScript. Try to add the following code in your script file:
const sliderImages= document.querySelectorAll('carousel-inner .item');
window.onload = function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
window.onresize= function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
working on Cordova android application with framework 7, I create bottom bar as a music player, and top of the bottom bar add song progress bar.
To add progress bar div on the top position I use CSS property -position: absolute. its display fine at my device and many other devices I tested but some Android devices face some issue like song progress bar displayed middle of the bottom bar.
<div class="views pageview">
<div class="view view-main">
<div class="toolbar toolbar-bottom hidden-toolbar" id="buttomBar" style="opacity: 0;height: 80px;">
<div class="toolbar-inner">
<div class="myProgress2" id="myProgress2" style="background-color: grey; width:100%;position: absolute!important;">
<div id="myBar2" class="myBar2" style="width: 3%;height: 10px;background-color:#00bcd4;"></div>
</div>
<div class="list-block" id="songname" onclick="showToolbar();">
<a href="#" class=" size-30 item-link smart-select">
<select name="fruits" id="tracklistappend" onchange="getAudioUrl(this)">
</select>
<div class="item-content">
<img src="img/pula.jpg" width="70px" height="50px" id="trackimage">
<div class="item-inner">
<div class="item-title" id="trackNameNclipName"></div>
</div>
</div>
</a>
</div>
<span style="margin-left: 2px;" id="duration"></span>
<a onclick="playButton()" class="link size-50 left" id="play"><i class="fa fa-play-circle" aria-hidden="true"></i></a>
<a onclick="puseButton()" class="link size-50 left" id="pause"><i class="fa fa-pause-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="pages">
<div data-page="index" class="page no-navbar no-toolbar navbar-hidden toolbar-hidden hide-toolbar-on-scroll">
<div class="page-content landingpage">
<div class="content-block" style="height:60px;"></div>
<div class="logo main col12"> <img src="img/bplogo.png" alt=""> </div>
</div>
</div>
</div>
</div>
</div>
other android devices like Samsung j2 progress bar displayed like above
on my device progress bar displayed at the top
You need to set up a consistent code for each major change in webview.
Explore the user fragmentation per webview version in order to decide which support you're in need to give.
If you're on first version, try to refer to webview-supported html5 and CSS.
I have a phonegap windows phone 8 app with jquery mobile for styling. I am using the fixed footer for navigation. The footer however floats a few pixels above from the bottom of the phone.
Ive completed the android/Ios version of the application. Im using Adobe Phonegap build to build my application. Android/IOS version is working perfectly. But now im trying to test the Windows Phone 8 version of the app and also i've tested in phone browsers as well its working perfectly in windows 8 phone,ios and android. but i build windows phone app (app.xap) and installed in windows phone and footer is not positioned as expected there is gap above from the bottom.
Please help me out. Any kinda help would be deeply appreciated. Thanks =)
<div data-role="page" data-theme="a" id="page_Login">
<div data-role="header" data-theme="a" class="okn_applicationTitleLogo">
<img src="Content/mobile/themes/default/images/logo.png" />
</div>
<div data-role="content" data-theme="a" id="loginpage" >
<div class="okn_contentContainer">
Login
<div data-role="fieldcontain" class="ui-hide-label">
<label for="txtLogin">Username</label>
<input type="email" name="txtLogin" id="txtLogin" data-bind="value: Username" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="txtPassword">Password</label>
<input type="password" name="txtPassword" id="txtPassword" data-bind="value: Password" placeholder="Password" />
</div>
<div data-role="fieldcontain">
<label>
<input type="checkbox" name="chkRememberLogin" data-bind="checked: RememberMe " />
Remember me</label>
</div>
</div>
<div data-role="footer" data-id="footer_Main" id="firstFooter" data-theme="a" >
<h4>© <span class="footer_copyrightYear">2000</span> <span class="footer_version"></span></h4>
</div>
</div>
</div>
change footer div like this:
<div data-role="footer" data-position="fixed" style="position: absolute">
Or you can add position absolute directly in your jquery mobile CSS if you prefer.
I just got my shiny new Nexus 7 and was playing around with Cordova (Phonegap). I created a simple page with a couple of text input fields and a text area. On my iPhone I can click the text fields and the keyboard comes up and I can edit the text. On my Nexus 7 running 4.1.1 Jelly Bean with Cordova 1.9.0, the keyboard comes up but when you type nothing shows up in the text field or text area.
I'm pretty sure my code is fine since it works on the iPhone and Android 2.3.5, but here is the snippet in question just in case:
<body onload="onBodyLoad()">
<div data-role="page" id="mainpage">
<div data-role="header" data-theme="a">
<h2>Lightweight</h2>
</div>
<div data-role="content">
<div>
<a href="#" data-role="button" data-icon="check" data-iconpos="bottom" data-theme="b" onClick=onClickInterrogate()>Interrogate</a>
</div>
<div align="center">
<a href="#" data-role="button" data-inline="true" data-icon="forward" data-theme="b" onClick=downloadFile()>Send</a>
<a href="#" data-role="button" data-inline="true" data-icon="gear" data-iconpos="right" data-theme="b" onClick=onClickSettings()>Settings</a>
</div>
<div align="center">
<label for="serverUrl">Server URL:</label>
<input type="text" name="name" id="serverUrl" value="urlGoesHere"/>
<label for="zipFile">Zip File:</label>
<input type="text" name="name" id="zipFile" value="tran1.zip"/>
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea">urlGoesHere</textarea>
</div>
</div>
<div data-role="footer">
<h1> © 2012 Company Name </h1>
</div>
</div>
I just tried this on Android 2.3.5 and it works fine. Anyone experienced something similar?
The issue persists in 2.1.0 as well.
Here's how I got it fixed.
Remove the following CSS rule and you can type happily in the input elements.
-webkit-user-select: none;
Phonegap just released 2.0. It has fixed the issue with the keyboard.
I must use my application with browser too and there is the same problem. It's possible fix this on textarea only:
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
textarea
{
-webkit-user-select: auto !important;
}
it works with jquery mobile too.
-webkit-user-select: none;
that did the trick for me. I was completely lost for couple of hours trying variations of input field parameters, nothing else worked. (phonegap 2.5.0 / android 4.1.1)
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