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
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?
The webview doesn't understand what html height 100% means its just showing a blank page. However, in mobile browser it works perfectly fine. Can anyone help me? I've gone through a lot of suggestions but none of that worked. As you can see in the code, I've purposely set the html background color as red so that i can see if the html document is indeed on my webview. I don't see any red at all its just pure white.
It only works if i hard set the height and i don't want to do that. My code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
min-height:100%;
background-color:red;
position:relative;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
min-height: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color:red; /*#E9E9E9;*/
position:relative;
}
</style>
</head>
<body style="position:relative">
<div style="overflow-y:hidden" class="container-fluid login-container">
<div class="row" style="height:15%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:13%;">
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" style="height:5%;">
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" style="height:30%;">
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row" style="height:20%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:16%;">
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure your webview layout is configured properly:
android:layout_height="match_parent"
If you used wrap_content, the webview itself will shrink to zero so that only blank page is shown.
Showing red in IE and chrome, I could recommend instead of height: 100%; use height:100vh; as this will set the div to 100% of the view port height. a div tag will not automatically take the height of the view port, you must tell it to do so. also removed the following code as position:relative; is for Tgas not the . also removed the height styles from the row tags. you can set that in css but the height should set itself for each row.
html{
margin:0;
padding:0;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
background-color:red; /*#E9E9E9;*/
}
.cont-height {
height: 100vh;
}
<div class="container-fluid login-container cont-height">
<div class="row" >
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I had the same problem here:
Android WebView: how to let the css use the entire height w/ position absolute?
I answered my own question, problem was using alignParent instead of match_parent.
I hope that's the problem in your case.
In any case, try to put some borders to your WebView just to see where it actually stops.
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
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.