I'm using bootstrap to make a responsive webapp.
I started doing some tests with a navbar and a form in my website, the problem is the navbar in android because is being rendered with full width (like a desktop view) and chrome (for android) shows a zoom and this is not the idea behind the responsive UI.
I also tried on my windows phone and it's rendering correctly, this happends with black berry mission tool for web develop wich emulates a tablet or mobile view.
So the problem now is android...
My code for the navbar is this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'vetpet.views.index.showIndex' %}">Vetpet Alpha</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Veterinarias <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="fa fa-plus" style="color:green"></span>Agregar Veterinaria</li>
<li><span class="fa fa-list " ></span>Listar</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Do you use the bootstrap basic template?
http://getbootstrap.com/getting-started/#template
If not, make sure you use the correct viewport settings. Have a look at this page:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Also keep in mind that css calculations are not available in androids default browser before 4.4. But you can use a workaround for this (box-sizing, positive padding, negative margin).
And in case you didn't know, you can use chrome to simulate webkit mobile devices. This also includes touch screen simulation, sensors and so on although it is not a perfect simulation:
https://developers.google.com/web/fundamentals/tools/test/emulator
Related
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 am creating a little AngularJs app that I want to optimize for all platforms and devices. I am using Bootstrap as my main styling method. This is a first for me, so I would appreciate your patience :D.
I have a basic skeleton of the app, but I have found that browsing the app on my mobile device, it does not display the way I imagined and desire.
This is a screenshot taken on my phone (Android):
I would like it to display like this:
Here is my index.html code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>IMPI Technical Services</title>
<!-- Style sheets -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/toastr.css" />
<!-- favicons -->
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="images/favicon/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="images/favicon/apple-icon-180x180.png" href="images/favicon/apple-icon-180x180.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="images/favicon/android-icon-192x192.png">
</head>
<body ng-app="impi-app">
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar-brand" ui-sref="home">IMPI Techincal Services</a>
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="products">Products</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
<!-- Footer -->
<div class="container" id="copyright">
<div>
<footer>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<p>Copyright © Impi Technical Service 2017</p>
</div>
</div>
</footer>
</div>
</div>
...
</body>
</html>
Here is the home view code:
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h2>A Warm Welcome!</h2>
<p>
This is the new home of IMPI Technical Services. We specialise in the delivery of specialised - customer focused - mining and construction
industry products and services.
</p>
<br />
<p>
Our site is currently under development, and we are looking forward to bringing you a feature rich, customer experience. For ANY queries, you are more
that welcome to contact us directly, or to fill in our contact form!
</p>
<p>
<a class="btn btn-primary btn-large" ui-sref="contact">Contact Form</a>
</p>
</header>
<hr>
<!-- Title -->
<div class="row">
<div class="col-lg-12">
<h3>We Are Proud Suppliers Of:</h3>
</div>
</div>
<!-- /.row -->
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/rockmore.jpg" alt="Rockmore International">
<div class="caption">
<h3>Rockmore International</h3>
<p>Rockmore International is one of the worlds leading manufacturers of top quality percussive rock drilling tools.</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/Montbert.jpg" alt="Montabert Hydraulic Drifters">
<div class="caption">
<h3>Montabert Hydraulic Drifters</h3>
<p>
Montabert was founded in 1921 by Joannes Montabert as Montabert S.A, a manufacturer of pneumatic equipment that would
introduce the first hydraulic concrete breakers and drifters. In 1935, through the initiative of Suzanne Montabert,
the company expanded its product line and added the Sullivan Ikine line of products under license.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/vula-drilling.png" alt="Vulla Drilling">
<div class="caption">
<h3>Vula Drilling (Pty) Ltd</h3>
<p>
VULA Drilling (Pty) Ltd. is the Original Equipment Supplier (OES) of the patented VULA range of hard-rock drill bits.
This new range of drill bits have been specifically designed and developed with the use of ultra modern
Computer-Aided-Design-and-Manufacturing (CAD/CAM) Software to improve penetration rates and increase flushing of the drill bit,
resulting in an increase in productivity and meters drilled.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/powerbit.png" alt="Powerbit Rocktools">
<div class="caption">
<h3>Powerbit Rocktools</h3>
<p>
Powerbit Rocktools has been in operation since 1996. They are a South African based company, with clients all over Africa.
Their factories are located in Taiwan and China.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>>
</div>
Any pointers on what I am missing or doing wrong?
This is the site address if you'd like to view it on your own mobile device to test the display: www.impitechservices.co.za
You are missing a few meta tags in the head tag.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
These tags are required to enable proper rendering of a page.
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'm fighting against this bug over the weekend and I can't find a solution. My JQuery Mobile app has some switches. When testing on android 2.2 or 2.3 a strange bug happens: I scroll down a little to reach the switches then I trigger them with a swipe gesture and the page jumps to the bottom or even over the bottom. From then on it's not possible to scroll to the top of the page! Seems a like the scrollable area has redefined itself somehow.
I made a simple demo to show this behavior. Everything is out of the box. JQM, JQ, iScroll and iScrollview untouched and no own code.
Update
I just made an upgrade brunch on Github with JQM 1.3.2 - the switches are now working but a range slider doesen't ;/ Seems to be somethin with the slide event that triggers iscroll somehow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>iScroll Jumpbug Demo</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.2.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-id="persist" data-theme="b" data-position="fixed">
<h3>
iScroll Jumpbug Test
</h3>
</div>
<div data-role="content" data-iscroll="{"hScroll":false, "vScroll": true, "vScrollbar":false, "bounce":false, "snap": false, "momentum":false}" style="padding: 2,5%">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">
<a href="#" data-transition="slidefade">
Text
</a>
</li>
</ul>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">Testelement1</li>
<li data-theme="b">Testelement2</li>
<li data-theme="b">Testelement3</li>
</ul>
<div style="width:100%; height: 3em;"> </div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<p>
This demo shows a bug that occures using JQM 1.2 and iScroll 4 with iScrollview on Android 2.x Devices.
When you drag the page a little down and then use the second swipe trigger, the page jumps to the bottom
over the border and "stucks" there - it's not more possible to scroll to the top. Looks a like the scrollable area redefines itself.
</p>
<!-- Test Form -->
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="form_text">
Some Label
</label>
<textarea name="form_textarea" id="form_text" placeholder="Some fill element">
</textarea>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch1">
Switch me #1
</label>
<select name="form_mailinglist" id="toggleswitch1" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch2">
Switch me #2
</label>
<select name="form_mailinglist2" id="toggleswitch2" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
</form>
<!-- Linebreaks meant to make the scrollable area longer for testing purposes -->
<p>
<br/>
1
<br/>
2
<br/>
3
<br/>
4
<br/>
5
<br/>
6
<br/>
7
<br/>
8
<br/>
9
<br/>
10
<br/>
11
<br/>
12
<br/>
13
<br/>
14
<br/>
15
<br/>
16
<br/>
17
<br/>
18
<br/>
19
<br/>
20
<br/>
21
<br/>
22
<br/>
23
<br/>
24
<br/>
25
<br/>
26
<br/>
27
<br/>
28
<br/>
29
<br/>
30
</p>
<div> Wellcome to the bottom dude!</div>
</div> <!-- End of the content -->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Footer >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<div data-role="footer" data-id="persist" data-iconpos="top" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li>
Test
</li>
<li>
Test2
</li>
</ul>
</div>
</div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
</div> <!-- End of the page -->
</body>
</html>
You can find the demo on GitHub:
https://github.com/Hexodus/iScroll_Jumpbug
There is even the apk file when you like to take a quick glance (your phone should be Android 2.2 or 2.3):
Or you can quickly install it via QR code:
By the way - I really can't replicate this bug on jsfiddle because it doesen't happen there. Jsfiddle is changing something so the page is not even shown correctly.
I badly need your assistance folks.
I have an element which has the following css.
background: #ccc;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
I have tested the website on android 2.3 and it works fine, but when I load it on a device that runs 4.0, the element does not show up. I have inspect it with Adobe Edge Inspect(formerly Adobe Shadow) and it changes the background property to background:initial, I have tried overriding it with anything else but the inspector will go back to background:initial.
Is there Anything I can do to fix it or is this just a device bug? (it loads properly on mobile chrome)
EDIT: It only happens in one page, homepage
EDIT 2: Here is the html in question
menu
<h1 class="logo"><img title="" src="" alt=""/></h1>
<div class="social">
<ul>
<li class="rss" title="RSS">RSS</li>
<li class="twitter" title="Twitter">Twitter</li>
<li class="facebook" title="Facebook">Facebook</li>
<li>
<form action="" class="searchform" method="get">
<div class="searchform">
<label for="s" class="skip"></label>
<input type="text" id="s" value="" name="s" class="watermark" placeholder="search" />
<input type="submit" value="Search" class="searchsubmit" />
</div>
</form>
</li>
</ul>
</div>
</div> <!-- end #inner-header -->
<div class="navigation-container" id="main-navigation">
<nav role="navigation">
<ul id="menu-nav" class="">
<li id="menu-item-8" class=""><a href=""</li>
<li id="menu-item-17747" class=""></li>
<li id="menu-item-7" class=" menu-item-7"></li>
<li id="menu-item-6" class=""></li>
<li id="menu-item-5" class=""></li>
</ul>
<div class="social">
<ul>
<li>
<form action="" class="searchform" method="get">
<div class="searchform">
<label for="s" class="skip"></label>
<input type="text" id="s" value="" name="s" class="watermark" placeholder="search" />
<input type="submit" value="Search" class="searchsubmit" />
</div>
</form>
</li>
<li class="facebook" title="Facebook">Facebook</li>
<li class="twitter" title="Twitter">Twitter</li>
<li class="rss" title="RSS">RSS</li>
</ul>
</div>
</nav>
</div>
As you may or may not have noted, this is pard of a wordpress theme and this is placed in the header, so every page has this exact same header. For some reason, this only breaks on the homepage. Another note, I have removed a lot of identifying information so the links don't have urls and other things are missing but all the elements are there