I have strange problem with native selectbox on Android devices - in the case of longer page like screen height and after click on selectbox - fixed toolbars hide.
Part of the code (original has approx. 7 selectboxes):
<div data-role="page" id="profile" class="whole_page">
<div data-role="header" data-tap-toggle="false" data-position="fixed">
<img src="img/logo.png" class="ui-btn-left header_image" /><h1>Title</h1>
</div>
<div data-role="content">
<label for="occupation">Povolanie:</label>
<select class="selecttmenu" name="occupation" id="occupation" data-theme="a" onchange="check_profile_form()">
<option value="0" data-placeholder="true"></option>
<option value="1">student</option>
<option value="2">employed</option>
<option value="3">unemployed</option>
</select>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="footer_border" data-id="myfooter">
<div data-role="navbar" class="navbarik">
<ul>
<li><img src="img/profile.png" class="footer_image" /><br /><span class="footer_text">profile</span></li>
<li class="last"><img src="img/logout.png" class="footer_image" /><br /><span class="footer_text">logout</span></li>
</ul>
</div>
</div>
</div>
Every answer will be appreciated. Thanks in advance.
Related
I am strucked into an issue where the collapsable bootstrap navbar extends full width and seems not to be responsive only on android mobile devices. It works fine on iphone. The site is http://tworingsmedia.com/clients/Cornwall/05/index.html
Here is the code:
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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 class="navbar-brand">
<img src="img/web-logo03.png" width="270" height="248" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
Try using the image size with rem units. Because the image is not responsive, the nav bar is not getting responsive. With rem units, it will be responsive and you can define the size of it as you wish with the responsiveness.
Should I use px or rem value units in my CSS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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 class="navbar-brand">
<img src="http://tworingsmedia.com/clients/Cornwall/05/img/web-logo03.png" width="100rem" height="90rem" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
I'm using ionic card to show some reports ans statistics (with chartjs). It works perfectly on browser and android 4.4.2, but the text is not showing on android 5.
Screen shot of application running on android 4.4.2:
Screen shot of application running on android 5:
Here is my specs:
ionic v: 2.1.1
cordova v: 6.3.1
Nodejs v: v4.2.6
And here is my code:
<div class="row">
<div class="col">
<div class="list card">
<a class="item item-icon-left bg-blue color-white">
<i class="icon ion-pricetag"></i>
CA
</a>
<div class="row">
<div class="col col-40 clotureInfo">
<div class="row light-bg">
<div class="col col-50">
<a class="item">CA Global</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.caGlobal}}€</a>
</div>
</div>
<div class="row">
<div class="col col-10"> <a class="item"> <i class="icon ion-arrow-right-c"></i></a></div>
<div class="col col-40">
<a class="item"> Vente directes</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.venteDirecte}}€</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Nb tickets</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.nbTickets}}</a>
</div>
</div>
<div class="row">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Tickets moyen</a>
</div>
<div class="col col-50">
<a class="item price" ng-if="globalData.nbTickets>0"> {{(globalData.venteDirecte / globalData.nbTickets).toFixed(2)}}€</a>
<a class="item price" ng-if="globalData.nbTickets==0"> 0</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"> <a class="item"> <i class="icon ion-arrow-right-c"></i></a></div>
<div class="col col-40">
<a class="item"> Vente resto</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.venteResto}}€</a>
</div>
</div>
<div class="row">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Nb couverts</a>
</div>
<div class="col col-50">
<a class="item price"> {{globalData.nbCouverts}}</a>
</div>
</div>
<div class="row light-bg">
<div class="col col-10"></div>
<div class="col col-40">
<a class="item"> Moy couverts</a>
</div>
<div class="col col-50">
<a class="item price"> {{(globalData.venteResto / globalData.nbCouverts).toFixed(2)}}€</a>
</div>
</div>
</div>
<div class="col col-50">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options" chart-colors="globalData.colors2">
</canvas>
</div>
<div class="col col-10">
<p class="rec-color"> <span ng-style="{background: globalData.colors2[0]}"></span> Vente resto </p>
<p class="rec-color"> <span ng-style="{background: globalData.colors2[1]}"></span> Vente directe</p>
</div>
</div>
</div>
</div>
</div>
I tried to show the text using css style using z-index and color with !important but it deosn't work.
There where a conflict between css class "card" and the chartjs.
It worked in this two cases:
When i removed the chartjs canvas
When i removed the card css class
So i removed the card and i used a custom css code.
But why it worked fine on android 4.4.2 and there was a bug on android 5?
I am using Intel XDK to build an app with app designer.
I've got a login screen info (UID, PWD and Login Button) inside a row.
Now I want this row to appear at screen center(horizontal and vertical), irrespective of screen size.
Do I have to do this with media query with different sizes or there is any other way of doing this without using the media queries ?
code :
<div class="upage background" id="mainpage">
<div class="upage-outer">
<div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0">
<h2></h2>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content content-area vertical-col" id="page_92_17">
<div class="grid grid-pad urow uib_row_1 space" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="table-thing widget uib_w_3 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1">
<label class="narrow-control"></label>
<input class="wide-control form-control default" type="text" placeholder="Username">
</div>
<div class="table-thing widget uib_w_4 d-margins" data-uib="twitter%20bootstrap/input" data-ver="1">
<label class="narrow-control"></label>
<input class="wide-control form-control default" type="password" placeholder="Password">
</div>
<button class="btn widget uib_w_5 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="1">Login<i class="glyphicon glyphicon-chevron-right button-icon-right" data-position="right"></i>
</button><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0">
<h2></h2>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
</div>
Put your row/column inside another row/column. Then, in the outer column, set its alignment to "Center Vertical and Horizontal". And change the min-height of the outer row to 100% (or 100vh). You can do all of that from within App Designer.
That should do it.
Chris
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